html二级菜单纵向,纯CSS制作二级导航菜单(纵向)，不用JS/jquery，响应速度快

制作二级导航菜单(纵向)

#menu{

width: 200px;

border: 1px solid #999;

}

#menu ul{

margin: 0px;

padding: 0px;

list-style: none;/* 隐藏默认列表符号*/

}

#menu ul li{

background: #06C;

height: 35px;

line-height: 35px; /*行距*/

text-align: center;

border-bottom: 1px solid #999;

position: relative;

}

a{

display: block;

font-size: 13px;

color: #FFF;

text-decoration: none;/*隐藏超廉价默认下划线*/

}

a:hover{

color:#F00;

font-size: 14px;

}

#menu ul li ul{

display: none;/*默认隐藏*/

top:0px;

width: 200px;

border: 1px solid #ccc;

border-bottom: none;

position: absolute;

left: 200px;

}

#menu ul li:hover ul{

display: block;

}

#menu ul li:hover ul li a{

display: block;

}

• 前端
  • HTML/HTML5
  • CSS/CSS3
  • JavaScript/jquery
• 设计
  • 设计欣赏
  • 设计素材
• 网页设计
• 网页制作

提示：你可以先修改部分代码再运行。