                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /形形色色的下拉菜单

实现不了二级菜单竖着呀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style type="text/css">
 *{padding:0;margin:0}
        #nav{
            background-color:#eee;
 width:600px;
 height:40px;
 margin:0 auto;
 }
        ul{
            list-style: none;
 }
        ul li{
            float:left;
 line-height:40px;
 text-align:center;
 position:relative;
 }
        a{
            text-decoration:none;
 color:#000;
 padding:0 10px;
 display:block;
 }
        a:hover{
            color:#fff;
 background-color:#666;
 }
        ul li ul li{
            float:none;
 background-color:#eee;
 margin-top:2px;}
        ul li ul{
            position:absolute;
 left:0;
 top:40px;}
    </style>
</head>
<body>
  <div id="nav">
     <ul>
         <li><a href="#">首页</a></li>
         <li><a href="#">课程大厅</a></li>
            <ul>
                <li><a href="#">javascript</a></li>
                <li><a href="#">jquery</a></li>
            </ul>
         <li><a href="#">学习中心</a></li>
         <li><a href="#">经典案例</a></li>
         <li><a href="#">关于我们</a></li>
     </ul>
  </div>
</body>
</html>