三级菜单制作

三级菜单制作_第1张图片

HTML代码:

<body>
<div class="navMenu">
   <ul>
       <li><a href="#">首页</a>
           <ul>
               <li><a href="#">JavaScript+</a>
                   <ul>
                       <li><a href="#">三角函数</a></li>
                       <li><a href="#">矩形</a></li>
                   </ul>
               </li>
               <li><a href="#">语文</a>
                   <ul>
                       <li><a href="#">唐诗</a></li>
                       <li><a href="#">宋词</a></li>
                   </ul>
               </li>
               <li><a href="#">英语</a></li>
           </ul>
       </li>
       <li><a href="#">课程大厅</a></li>
       <li><a href="#">学习中心+</a>
           <ul>
               <li><a href="#">JavaScript+</a>
                    <ul>
                        <li><a href="#">三角函数</a></li>
                        <li><a href="#">矩形</a></li>
                    </ul>
               </li>
               <li><a href="#">语文</a>
                   <ul>
                       <li><a href="#">三角函数</a></li>
                       <li><a href="#">矩形</a></li>
                   </ul>
               </li>
               <li><a href="#">英语</a></li>
           </ul>
       </li>
       <li><a href="#">帮助</a></li>
   </ul>
</div>
</body>


CSS代码部分:

 *{
            padding:0;
            margin:0;
        }
        /*一级菜单*/
        .navMenu {
            width:570px;
            margin:0 auto;
        }
        .navMenu ul li{
            float: left;
            position: relative;
        }
        li{
            list-style: none;
            background-color: #eee;
            width: 140px;
            height: 40px;
            text-align: center;
            margin-right: 2px;
            margin-bottom: 2px;
        }
        li:hover{
            background-color: #0066FF;
        }
        ul li a{
            line-height: 40px;
            text-align: center;
            font-size: 20px;
            color: #000;
            text-decoration: none;
            display: block;
            padding:0 10px;
        }
        /*二级菜单*/
        .navMenu ul li ul {
            display: none;
            position:absolute;
            left: 0;
            top:0;
            margin-top:42px;
        }
        .navMenu ul li ul li{
            float: none;
        }
        .navMenu ul li:hover ul{
            display:block;

        }
        /*三级菜单*/
        .navMenu ul li:hover ul li ul{
            display: none;
            left:140px;
            top:-42px;
        }
        .navMenu ul li ul li:hover ul{
            display: block;
        }





你可能感兴趣的:(html,导航)