2 纯CSS的菜单

使用纯CSS实现菜单的原理：将下拉框隐藏，当鼠标在菜单时显示隐藏的菜单。

html代码：

<nav>
    <ul>
        <li>
           <a>菜单1</a>
           <ul>
              子菜单....
           </ul>
        </li>
    </ul>
</nav>

核心CSS代码

nav ul li:hover > ul {
    display: block;
}

nav li ul {
    display: none;
    position: relative;
    z-index: 1;
}

z-index的作用是使得菜单不被下面的内容覆盖。

来自为知笔记(Wiz)