css dropdown menu

just a very simple css styling with a bit of javascript code to create a drop down list with one just one level of nesting for now. will put here for reference

<script type="text/javascript">
function countdown (num) {
alert('testing ...');
        for (var i = 0; i <= num; i += 1) {
           // setTimeout(function(){doAlerts(num,i)} , i * 1000);
         setTimeout('doAlerts('+num+','+i+');' , i * 1000);

}
}
//
function doAlerts(num,i)
{
 alert(num - i);
}
    //countdown(5);
var g_display = 'block';
function toggleSubMenu(sender)
{
 var display = sender.getElementsByTagName('ul')[0].style.display;
//alert(display);
 if(display != null && display != '')
{
  g_display = display ;
  sender.getElementsByTagName('ul')[0].style.display = '';
}
else
{
  sender.getElementsByTagName('ul')[0].style.display =  g_display;
}
}
</script>
<style type="text/css">
.menu
{
}
.menu > li
{
 float:left;
 margin-right:1px;
 padding: 0px 5px 0px 5px;
 list-style-type:none;
 border: solid 1px #c4c4c4;
 background-color:#c1c1c1;
 width:120px;
}
.menu > li:hover
{
 /* background-color : blue; */
}
ul
{
 padding: 0px 5px 0px 5px;
 list-style-type:none;
 border: solid 1px #c4c4c4;
}
ul li ul
{
 display:none;
 padding: 0px 0px 0px 0px;
 list-style-type:none;
 border: solid 1px #c4c4c4;
}
ul li ul li
{
 display:block;
}
ul li ul li:hover
{
 background-color:#549ade;
}
</style>
 <input onclick="countdown(5);" type="button" value="Do It" />


<ul class="menu">
<li onmouseout="toggleSubMenu(this);" onmouseover="toggleSubMenu(this);">
        Thing 1
        
<ul>
<li>Subthing A</li>
<li>Subthing B</li>
<li>Subthing C</li>
</ul>
</li>
<li onmouseout="toggleSubMenu(this);" onmouseover="toggleSubMenu(this);">
        Thing 2
        
<ul>
<li>Subthing D</li>
<li>Subthing E</li>
<li>Subthing F</li>
</ul>
</li>
<li onmouseout="toggleSubMenu(this);" onmouseover="toggleSubMenu(this);">
        Thing 3
        
<ul>
<li>Subthing G</li>
<li>Subthing H</li>
<li>Subthing I</li>
</ul>
</li>
</ul>