css下拉二级导航样式

CSS下拉二级导航是网站常用的一种导航样式，它可以让用户更方便地浏览网站的各个页面，提高用户体验。接下来，我们来了解一下如何使用CSS实现下拉二级导航样式。

/*CSS代码开始*/

/*一级菜单样式*/
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #333;
    position: relative;
}

nav li {
    display: inline-block;
    margin-right: 10px;
}

nav a {
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 60px;
    padding: 0 15px;
    text-decoration: none;
}

nav a:hover {
    background-color: #666;
}

/*二级菜单样式*/
nav ul ul {
    display: none;
    position: absolute;
    top: 60px;
}

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

nav ul ul li {
    width: 150px;
    float: none;
    display: list-item;
    position: relative;
}

nav ul ul ul li {
    padding-left: 30px;
}

nav ul ul a {
    color: #fff;
    background-color: #6b6b6b;
}

nav ul ul a:hover {
    background-color: #3b3b3b;
}

/*CSS代码结束*/ 

上面这段代码中，我们先定义了一级菜单的样式，包括背景颜色等基本属性，并将每个菜单项设置为inline-block，这样可以将各个菜单项横排显示。

接下来，我们定义二级菜单的样式。首先，我们将二级菜单的display属性设置为none，这样二级菜单默认是不显示的。当鼠标悬停在一级菜单上时，我们将其子元素ul的display属性设置为inherit，这样就可以显示二级菜单。

在二级菜单中，我们将子菜单的宽度设置为150px，将其设置为list-item，这样子菜单项就可以竖排显示。子菜单项中的文字内容设置为白色，背景颜色为灰色，鼠标悬停时背景颜色变为深灰色。

通过上面的代码，我们就可以实现一个简单的下拉二级导航菜单样式。需要注意的是，在实际使用中，我们还需要针对不同的网站设计不同的样式，来更好地满足用户需求。