javaScript基础练习题-下拉框制作(CSS)

http://www.imooc.com/video/155
慕课网的视频,直接上代码
<!DOCTYPE hmtl>
<html>
    <head>
        <meta charset="utf-8" />
        <title>
            
        </title>
        <style type="text/css">
            * {
                margin: 0px;
                padding:0px;
            }
            #nav{
                background-color: #eee;
                width: 600px;
                height: 40px;
                margin: 0 auto;
                text-align:center;
                }
            ul{list-style:none }
            ul li{float: left; line-height:40px; text-align: center;position: relative;}
            a {
                text-decoration: none;
                display:block;
                padding: 0 10px;
            }
            a:hover{
                color: #fff;background-color: #666;
            }
            /*这句的意思是当鼠标滑到ul li 上方时当前的ul li ul显示 */
            ul li:hover ul{
                display: block;
            }
            ul li ul li {
                float: none;background-color: #eee;margin-top: 2px;
            }
            ul li ul {
                /*绝对定位必须何left,top等组合使用,top:40px,是因为其父亲li的lineheight是40px;*/
                position: absolute;left: 0px;top:40px;display: none;
            }
            
        </style>
              
    </hean>
    <body>
        <div id="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程大厅</a>
                    <ul>
                        <li><a href="#">javascript</a></li>
                        <li><a href="#">JQuery</a></li>
                    </ul>
                    
                </li>    
                <li><a href="#">学习中心</a></li>  
                <li><a href="#">经典案例</a>
                    <ul>
                        <li><a href="#">BBS</a></li>
                        <li><a href="#">newsSystemnewsSystem</a></li>
                    </ul>
                </li>
                <li><a href="#">关于我们</a></li>
                
                
            </ul>
            
        </div>
            
        
    </body>
         
</html>