html ul li做左侧菜单,css ul li实现纵向导航菜单效果

Document

.nav>li {

float: left;

}

.nav{

list-style: none;

}

.drop-down-content{

list-style: none;

}

.nav a{

display: block;

text-decoration: none;

width: 100px;

height: 50px;

text-align: center;

line-height: 50px;

color: white;

background-color: gainsboro;

}

.drop-down-content a {

display: block;

text-decoration: none;

width: 100px;

height: 50px;

text-align: center;

line-height: 50px;

color: white;

background-color: gainsboro;

}

.nav>li:first-child a {

border-radius: 0px 0 0 0px;

}

.nav>li:last-child a {

border-radius: 0 0px 0px 0;

}

.drop-down {

position: relative;

}

.drop-down-content {

display: none;

padding: 0;

position: absolute;

z-index: 9999;

}

.banner {

clear: both;

}

.drop-down-content li:hover a {

background-color: red;

}

.nav .drop-down:hover .drop-down-content {

display: block;

left: 0;

}

• 主菜单一

  • 1

  • 2

  • 3

• 主菜单二

  • 11

  • 22

  • 33

• 主菜单三

• 主菜单四

• 主菜单五