CSS3下拉菜单实现

导航菜单：

<nav class="multi_drop_menu"><!-- 一级开始 --><ul><li><a href="#">Power</a></li><li><a href="#">Money</a></li><li><a href="#">Love</a></li><li><a href="#">Fame</a><!-- 二级开始 --><ul><li><a href="#">Sports Star</a></li><li><a href="#">Movie Star</a></li><li><a href="#">Rock Star</a><!-- 三级开始 --><ul><li><a href="#">Bruce Springsteen</a></li><li><a href="#">Bone</a></li><li><a href="#">Mick Jagger</a></li><li><a href="#">Bob Dylan</a></li></ul><!-- 三级结束 --></li><li><a href="#">Web Designer</a></li></ul><!-- 二级结束 --></li></ul><!-- 一级结束 --></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.隐藏所有低级菜单。

<style>.multi_drop_menu {font: 1em helvetica, arial, sans-serif;}.multi_drop_menu a {display: block;color: #555;background-color: #eee;padding: 0.2em 1em;border-color: transparent;}.multi_drop_menu a:hover {color: #fff;background-color: #aaa;}.multi_drop_menu a:active {background: #fff;color: #ccc;}.multi_drop_menu * {margin: 0;padding: 0;}.multi_drop_menu ul {float: left;}.multi_drop_menu li {float: left;list-style-type: none;position: relative;}.multi_drop_menu li a {display: block;border-right-style: solid;background-clip: padding-box;text-decoration: none;}.multi_drop_menu li:last-child a {border-right-style: none;}.multi_drop_menu li ul {display: none;}
</style>

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

需要添加的CSS:

1.二级菜单列表宽度给字体9倍

2.二级菜单内部a去掉右边框，上边框实线。

3.二级菜单列表临时显示，显示为块状，相对于父亲绝对定位，左边与父菜单对齐，顶边与父菜单底对齐。

4.二级菜单列表项停止浮动恢复堆叠。

5.三级菜单临时隐藏。

效果：

style中增加CSS:

.multi_drop_menu li ul {width: 9em;display: none;position: absolute;left: 0;top: 100%;}.multi_drop_menu li:hover>ul {display: block;}.multi_drop_menu li li a {border-right-style: none;border-top: solid;}.multi_drop_menu li li {float: none;}

添加三级菜单

样式中增加：

.multi_drop_menu li li ul {position: absolute;left: 100%;top: 0;
}