纯 CSS 实现的下拉菜单

要利用 CSS 实现下拉菜单，首先需要将菜单内容写在嵌套的无序列表中，例如：

<ul id="nav">
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Archive&#9662;</a>
        <ul>
            <li>
                <a href="#">Alpha Example</a>
            </li>
            <li>
                <a href="#">Hover For More &#9656;</a>
                <ul>
                    <li><a href="#">Sub Menu Item</a></li>
                    <li><a href="#">Sub Menu Item</a></li>
                    <li><a href="#">Sub Menu Item</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Beta Example</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">About&#9662;</a>
        <ul>
            <li><a href="#">Alpha Example</a></li>
            <li><a href="#">Beta Example</a></li>
            <li><a href="#">Gamma Example</a></li>
        </ul>
    </li>
</ul>

在这个例子中，我们希望将 Home，Archive，About 这几个主菜单项横向排列，这个可以通过 display: inline-block; 得到。接下来，我们 Archive 和 About 有下拉子菜单，这个可以通过 li:hover > ul 和 绝对定位方式得到。最后，在 Archive 子菜单里面的又有右拉的二级子菜单，也可以用同样的方式实现。实际的 CSS 代码如下：

/* main menu */
#nav {
    display: inline-block;
    padding: 0;
    line-height: 2em;
    background: #ddd;
}
#nav li {
    list-style-type: none;
    float: left;
    padding: 0 .5em;
    position: relative;
}
#nav li a {
    text-decoration: none;
}

/* level 1 sub menu */
#nav li > ul {
    display: none;
    padding: 0;
    background: #ddd;
    position: absolute;
    top: 2em;
    left: 0;
    width: 160px;
    border: 1px solid gray;
}
#nav li ul li {
    padding: 0 .5em;
    margin: 0;
    position: relative;
}
#nav li:hover > ul {
    display: block;
}
#nav li:hover > ul li {
    list-style-type: none;
    float: none;
}

/* level 2 sub menu */
#nav li ul li ul {
    display: none;
    position: absolute;
    top: 0px;
    left: 161px;
    width: 160px;
}
#nav li ul li:hover > ul {
    display: block;
}

实际的例子看这里。由于 IE6 不支持 li:hover 和子元素选择器，这种方式无效。

在 iOS 触屏设备中，需要注意，如果菜单项包含子菜单，即使该菜单项无需链接，仅仅用 <span>Menu</span> 是不能让依赖 :hover 样式的下拉菜单生效的。我们需要用 <a href="#">Menu</a> ，或者 <a href="javascript:void(0)">Menu</a>，或者 <span onclick="void(0)">Menu</span>，使得浏览器判定该元素为可点击元素，从而应用 :hover 样式。当然，添加 mousemove，mousedown 或者 mouseup 事件处理函数也是可以的。如果需要在点击其它地方时自动收起菜单，可以给其它兄弟元素都添加空的 click 事件处理函数。详情可以参考这里。但是 Android 设备中的各个浏览器对 hover 的处理又各不相同，因此，最好还是使用 JavaScript 来实现完美的下拉菜单。

参考资料：
[1] CSS3 Dropdown Menu - Web Designer Wall
[2] CSS Selectors and Pseudo Selectors and browser support
[3] CSS3 Menu. Free CSS Menu Maker
[4] iOS has a :hover problem | NCZOnline
[5] Creating iPad Friendly Drop Down Menus | Theatrium Design:  The Green Room Blog
[6] Are Hover Events Extinct? | Design Shack
[7] How to deal with :hover on touch screen devices
[8] Safari Web Content Guide - Making Elements Clickable
[9] How Mobile Safari emulates mouse events