css二级导航布局 |github css 样式

首先，大家需要为导航菜单设置样式，包括背景颜色、字体、字体大小等等。为了方便布局，大家通常使用无序列表（ul）和列表项（li）来组织导航菜单。

.nav{
background-color: #333;
padding: 10px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.nav ul{
list-style: none;
margin: 0;
padding: 0;
}
.nav li{
display: inline-block;
margin-right: 20px;
}
.nav a{
color: #fff;
text-decoration: none;
font-size: 16px;
}
.nav a:hover{
text-decoration: underline;
}
.nav ul ul{
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #333;
}
.nav ul li:hover >ul{
display: block;
}
.nav ul ul li{
display: block;
width: 200px;
margin: 0;
}
.nav ul ul a{
font-size: 14px;
padding: 8px 10px;
}
.nav ul ul a:hover{
background-color: #666;
}

大家在样式表中使用了伪类选择器（:hover）和后代选择器（>） 实现子菜单的显示和隐藏。

通过上述代码，大家可以实现一个基本的二级导航菜单。如果需要更多的子菜单，只需要在列表项中添加一个更多的无序列表即可，代码如下：

Menu Item
Submenu Item 1
Submenu Item 2
Submenu Item 3
Submenu Item 4

以上是 CSS 二级导航布局的实现方式，希望对你有所帮助。