兼容性：IE≥7（本机无IE6）

难度：简单

说来惭愧，我一直在用JS来写下拉菜单，一直到去年的10月份。前一阵有同学问我能不能不用JS，我想了想，还是有空写一段吧。

【效果演示（可能丑了点）】

【实现过程】

首先要知道一点知识：鼠标在子元素上的时候，父元素的:hover是开启的。

先按照一般的思路写好菜单的HTML框架，本例使用ul和li来制作菜单：

<ul>
    <li>菜单</li>
    <li>1</li>
    <li>
        <div>2</div>
        <ul>
            <li>21</li>
            <li>
                <div>22</div>
                <ul>
                    <li>221</li>
                    <li>222</li>
                    <li>223</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>3</li>
</ul>

这样的话，就是默认假设一个ul是一个层级的菜单了。注意：实际开发中不可这么写，至少要加一个.menu来区分这是普通ul还是下拉菜单的ul。

先不管一开始那个ul，我们先实现准备弹出的ul。这个ul一开始应该是display:none的，而且它的overflow应该是hidden，当鼠标移过某个li的时候，li>ul的display应该为block，而这个li所处的ul应该设为overflow:visible，这样li>ul就被显示出来了。

给菜单项设置固定的大小（不固定的话，实现起来会相当有难度吧）和基本的样式：

ul,li{
    width:80px;
    background:#333;
    color:white;
}
ul{
    /* 隐藏ul默认的小圆点和内边距 */
    padding:0;
    list-style:none;
    /* ul一开始是不显示的 */
    display:none;
    overflow:hidden;
    /* 弹出的ul跟父级li同高度看起来才比较正常，所以设置为顶端对齐 */
    vertical-align:top;
    margin-left:80px;
    margin-top:-40px;
}
li{
    /* ul是不用设置高度的，只需要给li设置 */
    height:40px;
    /* 单行文字水平垂直居中对齐 */
    line-height:40px;
    text-align:center;
}

然后考虑如何控制菜单的显示：

ul:hover{
    /* 可以显示子元素了 */
    overflow:visible;
    /* 让显示效果明显一点 */
    background:green;
}
li:hover{
    /* 让显示效果明显一点 */
    background:red;
}
li:hover>ul{
    /* li被hover时，下级ul要露出来 */
    display:block;
}

其实这样已经差不多了，但是还缺最重要的一点：一开始的那个ul没有显示！其实解决方法很简单，我们在外面套个div.nav或者用class来选中这个初始的ul，然后对它进行特殊设置（我用了div.nav）：

.nav>ul{
    display:block;
}
.nav>ul{
    margin:0;
    height:40px;
}

大功告成。当然，为了保持跟li同样的高度，我又给div加了个height:40px。

全部代码如下：

【HTML】

<div class="nav">
    <ul>
        <li>菜单</li>
        <li>1</li>
        <li>
            <div>2</div>
            <ul>
                <li>21</li>
                <li>
                    <div>22</div>
                    <ul>
                        <li>221</li>
                        <li>222</li>
                        <li>223</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>3</li>
    </ul>
</div>

【CSS】

div{
    height:40px;
}
ul,li{
    width:80px;
    background:#333;
    color:white;
}
ul{
    margin-top:-40px;
    margin-left:80px;
    padding:0;
    list-style:none;
    display:none;
    overflow:hidden;
    vertical-align:top;
}
li{
    height:40px;
    line-height:40px;
    text-align:center;
}
ul:hover{
    overflow:visible;
    background:green;
}
li:hover{
    background:red;
}
.nav>ul,li:hover>ul{
    display:block;
}
.nav>ul{
    margin:0;
    height:40px;
}