JS code Implementation drop-down menu

Effect

JS Code:

<script type= "Text/javascript" >
function Showsub (LI) {//functions definition
var submenu = Li.getelementsbytagname ("ul") [0];//Get
SubMenu.style.display = "block";
}

function Hidesub (LI) {
var submenu = Li.getelementsbytagname ("ul") [0];
SubMenu.style.display = "None";
}

</script>

CSS style:

*{margin:0px; padding:0px;}
body{Font-family:verdana, Geneva, Sans-serif; font-size:14px;}
#nav {width:600px; height:40px; Background-color: #eee; margin:0 auto;}
ul{List-style:none;}
UL li{Float:left; line-height:40px; text-align:center; width:100px;} IE7 display width compatibility setting width without padding adaptive
a{text-decoration:none; color: #000; display:block;}
a:hover{color: #F00; Background-color: #666;}
UL Li ul li{float:none;background-color: #eee; margin:2px 0px;}
UL Li ul{display:none;}

HTML code

<div id= "NAV" >

<ul>
<li><a href= "#" > Home </a></li>
<li onmouseover= "Showsub (This)" onmouseout= "hidesub (This)" ><a href= "#" > Course Hall </a>
<ul>
<li><a href= "#" >JavaScript</a></li>
<li><a href= "#" >Html/CSS</a></li>
</ul>
</li>
<li onmouseover= "Showsub (This)" onmouseout= "hidesub (This)" ><a href= "#" > Learning Center </a>
<ul>
<li><a href= "#" > Video Learning </a></li>
<li><a href= "#" > Example Exercises </a></li>
<li><a href= "#" > Ask and Answer </a></li>
</ul>

</li>
<li><a href= "#" > Classic case </a></li>
<li><a href= "#" > About Us </a></li>
</ul>

</div>

JS code Implementation drop-down menu