2 纯CSS的菜单

时间：2016-07-14 23:46:59 阅读：183 评论：0 收藏：0 [点我收藏+]

使用纯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的作用是使得菜单不被下面的内容覆盖。

原文：http://www.cnblogs.com/yexiaodong/p/7254b425c9cc854348b5f9f184bc1f76.html

踩

(0)

评论一句话评论（0）

分享档案

更多>