CSS implementation Style drop-down menu

Implementation of the drop-down menu

Script:

1<script type="Text/javascript">2 function Showsub (li) {3             varsubmenu = Li.getelementsbytagname ("ul")[0]; ;4SubMenu.style.display ="Block";5         }6 function Hidesub (li) {7             varsubmenu = Li.getelementsbytagname ("ul")[0];8SubMenu.style.display ="None";9         }Ten</script>

View Code

CSS code:

1*{margin:0px; padding:0px;}2#menu {background-color: #eee; width:600px; height:40px; margin:0Auto;}3ul{list-Style:none;}4UL li{line-height:40px; text-align:center; position:relative;float: Left;}5a{Text-decoration:none; color:# the; display:block; width:90px;}6a:hover{color: #FFF; background-color:#666;}7UL Li ul li{float: none;margin-top:2px; background-color: #eee;} 8 ul Li ul{width:90px; position:absolute;display:none;}9UL Li:hover Ul{display:block;}

View Code

Page HTML code:

1<div id="Menu">2<ul>3<li><a href="#"> Home </a></li>4<li><a href="#"> Course Halls </a>5<ul>6<li><a href="#">Javascript</a></li>7<li><a href="#">jQuery</a></li>8</ul>9</li>Ten<li><a href="#"> Learning Center </a> One<ul> A<li><a href="#"> Video Learning </a></li> -<li><a href="#"> Case Study </a></li> -<li><a href="#"> Exchange Platform </a></li> the</ul> -</li> -<li><a href="#"> Classic Cases </a></li> -<li><a href="#"> About Us </a></li> +<li><a href="#"> Contact Us </a></li> -</ul> +</div>

View Code

Code effects:

CSS implementation Style drop-down menu