CSS3下拉菜单实现

导航菜单：

html 复制代码

<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.隐藏所有低级菜单。

html 复制代码

<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:

html 复制代码

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

添加三级菜单

样式中增加：

html 复制代码

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