1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>最简单的菜单</title>
6 <style>
7 *{margin: 0;padding: 0;}
8 .moyu ul a{font-family: ‘微软雅黑‘;font-size: 14px;color: #333;text-decoration: none;}
9 .moyu ul a:hover{color: #000;text-decoration: none;}
10 .moyu ul li{width: 100px;height: 35px;line-height: 35px;text-align: center;position: relative;}
11 .moyu ul li:hover{background: #c1c1c1;}
12 .moyu ul{width: 100px;height: auto;position: absolute;background: #DADADA;list-style: none;}
13
14 .moyu ul.nav2{left: 99px;top: 0;display: none;}
15 .moyu ul.nav3{left: 99px;top: 0;display: none;}
16 .moyu .nav1 .li1:hover ul.nav2{display: block;background: #c1c1c1;}
17 .moyu .nav2 .li2:hover ul.nav3{display: block;background: #c1c1c1;}
18 .moyu .nav2 ,.moyu .nav2 li:hover {background:#ccc;}
19 </style>
20 </head>
21 <body>
22 <!--代码部分begin-->
23 <div class="moyu">
24 <ul class="nav1">
25 <li class="li1"><a href="#">一级导航</a>
26 <ul class="nav2">
27 <li class="li2"><a href="#">二级导航</a></li>
28 <li class="li2"><a href="#">二级导航</a>
29 <ul class="nav3">
30 <li class="li3"><a href="#">三级导航</a></li>
31 <li class="li3"><a href="#">三级导航</a></li>
32 <li class="li3"><a href="#">三级导航</a></li>
33 <li class="li3"><a href="#">三级导航</a></li>
34 </ul>
35 </li>
36 <li class="li2"><a href="#">二级导航</a></li>
37 <li class="li2"><a href="#">二级导航</a></li>
38 </ul>
39 </li>
40 <li class="li1"><a href="#">一级导航</a></li>
41 <li class="li1"><a href="#">一级导航</a></li>
42 <li class="li1"><a href="#">一级导航</a></li>
43 <li class="li1"><a href="#">一级导航</a></li>
44 <li class="li1"><a href="#">一级导航</a></li>
45 </ul>
46 </div>
47 <!--代码部分end-->
48 </body>
49 </html>
以上代码可以很好理解菜单的概念。
菜单就是盒子中小盒子的开启(display:block;)与关闭（display:hidden;）
想法都是一样的，实现的方法不同，可以用纯CSS来写，也可以用JavaScript，jQuery。或是更复杂的插件bootstrap，jQuery UI等。
时间： 2024-10-08 18:43:08