css竖型导航栏下拉菜单 |css absolute fixed

HTML代码：
<div class="nav">
<ul>
<li>菜单1
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</li>
<li>菜单2
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
</ul>
</li>
<li>菜单3</li>
<li>菜单4
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
</ul>
</li>
</ul>
</div>
CSS代码：
.nav {
background-color: #333;
margin: 0;
padding: 0;
width: 200px;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.nav ul li {
margin: 0;
padding: 0;
position: relative;
}
.nav ul li a {
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
}
.nav ul li:hover >ul {
display: block;
}
.nav ul ul {
display: none;
position: absolute;
top: 0;
left: 200px;
width: 200px;
}
.nav ul ul li {
display: block;
background-color: #666;
}
.nav ul ul li a {
color: #fff;
padding: 10px;
text-decoration: none;
}
.nav ul ul ul {
display: none;
position: absolute;
top: 0;
left: 200px;
width: 200px;
}
.nav ul ul ul li {
display: block;
background-color: #999;
}
.nav ul ul ul li a {
color: #fff;
padding: 10px;
text-decoration: none;
}
说明：
在HTML代码中，每一个菜单项都有一个下拉菜单，下拉菜单用<ul>和<li>标记表示，下拉菜单的样式用CSS的选择器控制。在CSS代码中，用.nav定义导航栏样式，用ul和li定义菜单项和菜单，用a定义菜单链接。下拉菜单的CSS样式使用绝对定位，通过:hover选择器在鼠标悬停时显示菜单。