<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>竖向导航栏</title>
<style>
ul{
list-style: none;
margin: 0;
padding: 0;
}
.nav1{
width: 150px;
margin-left: 30px;
}
.nav1 a {
display: block;
width: 150px;
height: 50px;
color: #FFFFFF;
font-size: 14px;
font-family: Arial,sans-serif;
text-decoration: none;
text-align: center;
line-height: 50px;
}
.li1{
margin-bottom: 1px;
background: rgb(136,136,136);
}
a.a1 {
font-size: 18px;
}
.a1:hover{
background: #666666;
font-weight: 600;
font-size: 20px;
}
.nav1 ul{
display: none;
}
.nav2{
background: #ddd;
}
.nav2 a:hover{
font-size: 14px;
font-weight: 300;
background: orange;
}
.li1:hover .nav2{
display: block;
}
</style>
</head>
<body>
<ul class="nav1">
<li class="li1"><a class="a1" href="">menu1</a>
<ul class="nav2">
<li><a href="">menu1_2</a></li>
<li><a href="">menu1_2</a></li>
<li><a href="">menu1_2</a></li>
</ul>
</li>
<li class="li1"><a class="a1" href="">menu2</a>
<ul class="nav2">
<li><a href="">menu2_</a></li>
<li><a href="">menu2_</a></li>
<li><a href="">menu2_</a></li>
</ul>
</li>
<li class="li1"><a class="a1" href="">menu3</a>
<ul class="nav2">
<li><a href="">menu3_</a></li>
<li><a href="">menu3_</a></li>
<li><a href="">menu3_</a></li>
<li><a href="">menu3_</a></li>
<li><a href="">menu3_</a></li>
<li><a href="">menu3_</a></li>
</ul>
</li>
<li class="li1"><a class="a1" href="">menu4</a>
<ul class="nav2">
<li><a href="">menu4_</a></li>
<li><a href="">menu4_</a></li>
<li><a href="">menu4_</a></li>
</ul>
</li>
<li class="li1"><a class="a1" href="">menu5</a>
<ul class="nav2">
<li><a href="">menu5_</a></li>
<li><a href="">menu5_</a></li>
<li><a href="">menu5_</a></li>
<li><a href="">menu5_</a></li>
</ul>
</li>
</ul>
</body>
</html>