三级菜单制作

来源：互联网发布：淘宝图库编辑：程序博客网时间：2024/06/05 15:53

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;        }

0 0