CSS3下拉菜单实现

导航菜单：

2. <nav class="multi_drop_menu">
3.         <!-- 一级开始 -->
4.         <ul>
5.             <li><a href="#">Power</a></li>
6.             <li><a href="#">Money</a></li>
7.             <li><a href="#">Love</a></li>
8.             <li><a href="#">Fame</a>
9.                 <!-- 二级开始 -->
10.                 <ul>
11.                     <li><a href="#">Sports Star</a></li>
12.                     <li><a href="#">Movie Star</a></li>
13.                     <li><a href="#">Rock Star</a>
14.                         <!-- 三级开始 -->
15.                         <ul>
16.                             <li><a href="#">Bruce Springsteen</a></li>
17.                             <li><a href="#">Bone</a></li>
18.                             <li><a href="#">Mick Jagger</a></li>
19.                             <li><a href="#">Bob Dylan</a></li>
20.                         </ul>
21.                         <!-- 三级结束 -->
22.                     </li>
23.                     <li><a href="#">Web Designer</a></li>
24.                 </ul>
25.                 <!-- 二级结束 -->
26.             </li>
27.         </ul>
28.         <!-- 一级结束 -->
29.     </nav>

复制代码

顶级菜单

样式：
1.菜单字体:1em helvetica,arial,sans-serif;
2.a链接，表现为块状撑满，字体颜色#555，配景致#eee，内边距上下0.2em左右1em,边框颜色透明。
3.a伪类悬停，字体颜色#fff,配景致#aaa.
4.a伪类点击，配景致#fff,字体颜色#ccc
5.团体菜单样式设置内边距，外边距为0.
6.菜单未排序列表为左浮动。
7.列表为左浮动，去掉点，相对定位。
8.列表中的a表现为块状，边框右侧为实线，配景延伸内边距盒子，下划线去掉。
9.末了一个a不表现右框线
10.潜伏全部低级菜单。

2. <style>
3.     .multi_drop_menu {
4.         font: 1em helvetica, arial, sans-serif;
5.     }
7.     .multi_drop_menu a {
8.         display: block;
9.         color: #555;
10.         background-color: #eee;
11.         padding: 0.2em 1em;
12.         border-color: transparent;
13.     }
15.     .multi_drop_menu a:hover {
16.         color: #fff;
17.         background-color: #aaa;
18.     }
20.     .multi_drop_menu a:active {
21.         background: #fff;
22.         color: #ccc;
23.     }
25.     .multi_drop_menu * {
26.         margin: 0;
27.         padding: 0;
28.     }
30.     .multi_drop_menu ul {
31.         float: left;
32.     }
34.     .multi_drop_menu li {
35.         float: left;
36.         list-style-type: none;
37.         position: relative;
38.     }
40.     .multi_drop_menu li a {
41.         display: block;
42.         border-right-style: solid;
43.         background-clip: padding-box;
44.         text-decoration: none;
45.     }
47.     .multi_drop_menu li:last-child a {
48.         border-right-style: none;
49.     }
51.     .multi_drop_menu li ul {
52.         display: none;
53.     }
54. </style>

复制代码

菜单的下拉部门(二级菜单)

必要添加的CSS:
1.二级菜单列表宽度给字体9倍
2.二级菜单内部a去掉右边框，上边框实线。
3.二级菜单列表临时表现，表现为块状，相对于父亲绝对定位，左边与父菜单对齐，顶边与父菜单底对齐。
4.二级菜单列表项克制浮动规复堆叠。
5.三级菜单临时潜伏。
结果：

style中增长CSS:

2. .multi_drop_menu li ul {
3.             width: 9em;
4.             display: none;
5.             position: absolute;
6.             left: 0;
7.             top: 100%;
8.         }
10.         .multi_drop_menu li:hover>ul {
11.             display: block;
12.         }
14.         .multi_drop_menu li li a {
15.             border-right-style: none;
16.             border-top: solid;
17.         }
19.         .multi_drop_menu li li {
20.             float: none;
21.         }

复制代码

添加三级菜单

样式中增长：

2. .multi_drop_menu li li ul {
3.     position: absolute;
4.     left: 100%;
5.     top: 0;
6. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金