[分享]css中导航二级菜单

CSS中的导航二级菜单是网站设计中的基本功能之一。通过二级菜单，可以轻松地将网站的主题分类和导航方式更加清晰明了。 主页 产品 产品1 产品2 产品3 关于我们 如上所示，使用HTML标签来实...

CSS中的导航二级菜单是网站设计中的基本功能之一。通过二级菜单，可以轻松地将网站的主题分类和导航方式更加清晰明了。

<ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">产品</a>
        <ul>
            <li><a href="#">产品1</a></li>
            <li><a href="#">产品2</a></li>
            <li><a href="#">产品3</a></li>
        </ul>
    </li>
    <li><a href="#">关于我们</a></li>
</ul> 

如上所示，使用HTML标签来实现导航的基本结构，<ul>用来承载导航内容，<li>用来分别表示导航中不同的选项。如果一个选项需要二级菜单，则在<li>中再嵌套一个<ul>即可。

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #333;
}

li {
    float: left;
    position: relative;
}

li a {
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px 20px;
}

li:hover {
    background-color: #4CAF50;
}

ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    background-color: #f9f9f9;
    padding: 0;
}

ul ul li {
    float: none;
    width: 100%;
}

ul ul a {
    color: #444;
    padding: 10px 20px;
}

ul ul a:hover {
    background-color: #4CAF50;
    color: white;
}

li:hover > ul {
    display: block;
} 

如上所示，通过CSS样式来设置导航的样式。首先，要将该列表元素的样式设置为无格式样式（list-style: none;)。其次，通过margin和padding属性控制间距和内边距。然后，可以设置背景颜色，文本颜色等外观属性。当鼠标悬停在一个导航选项上时，可以设置背景颜色等效果。

对于二级菜单，需要设置其为绝对定位，并将其顶部位置设置为100%。设置display:none来控制其初始状态为隐藏。> ul选择器用来选择父元素的直接子元素，所以可以在父元素上设置:hover来控制二级菜单的显示与否。