首页 > 代码库 > 导航菜单
导航菜单
导航菜单主要是由列表做出来的。不同的导航菜单还需要与<div>相结合来完成的。
一种菜单式横着的：
代码如下写：
HTML：
| <ul> | |
| <li><a href="http://www.mamicode.com/#">业界</a></li> | |
| <li><a href="http://www.mamicode.com/#">云计算</a></li> | |
| <li><a href="http://www.mamicode.com/#">移动</a></li> | |
| <li><a href="http://www.mamicode.com/#">研发</a></li> | |
| </ul> | <li><a class="#">程序员 </a></li>
|
css:
| ul{ | |
| list-style:none; | |
| } | |
| li{ | |
| width:80px; | |
| height:50px; | |
| background-color:#B6131B; | |
| float:left; | |
| line-height:50px; | |
| position: relative; | |
| top:2px; | |
| left:0px; | |
| text-align: center; | |
| } | |
| a{ | |
| text-decoration:none; | |
| color:white; | |
| font-size:20px; | |
| font-weight:bold; | |
| font-family: "黑体"; | |
| } | |
| li:hover{ | |
| background-color:#9B0000 ; | |
| } |
一种是竖着的与横着的都有的：
HTML：
| <div class="nav1"> | |
| <ul class="ul1"> | |
| <li id="lione" style="width:220px; text-align: left"> | |
| <a href="http://www.mamicode.com/#">菜单一</a> | |
| <div class="nav2"> | |
| <ul class="ul2"> | |
| <li> | |
| <a href="http://www.mamicode.com/#">菜单一</a> | |
| <div class="nav3"> | |
| <a href="http://www.mamicode.com/#"> 来点我！</a> | |
| </div> | |
| </li> | |
| <li> | |
| <a href="http://www.mamicode.com/#">菜单二</a> | |
| <div class="nav3">菜单二</div> | |
| </li> | |
| <li> | |
| <a href="http://www.mamicode.com/#">菜单三</a> | |
| <div class="nav3">菜单三</div> | |
| </li> | |
| </ul> | |
| </div> | |
| </li> | |
| <li><a href="http://www.mamicode.com/#">菜单二</a></li> | |
| <li><a href="http://www.mamicode.com/#">菜单三</a></li> | |
| <li><a href="http://www.mamicode.com/#">菜单四</a></li> | |
| <li><a href="http://www.mamicode.com/#">菜单五</a></li> | |
| <li><a href="http://www.mamicode.com/#">菜单六</a></li> | |
| </ul> | |
| </div> | |
CSS：
div{
border: 1px red solid;
}
ul{
list-style:none
}
a{
text-decoration: none;
}
.nav1{
width:960px;
height:40px;
margin: 0 auto;
border-radius:0px 8px 8px 0px;
background-color: orangered;
}
.ul1 li{
width:100px;
height: 100%;
float:left;
text-align: center;
line-height: 40px;
}
.ul1 li a{
color: #fff;
display: block;
width:100%;
height: 100%;
}
.ul1 li a:hover{
background-color: #FFA500;
}
.nav2{
width:220px;
height: 300px;
display: none;
position: relative;
}
.ul2 li{
float:none;
background-color: #32CD32;
width:100%;
text-align: left;
}
#lione:hover .nav2{
display: block;
}
.nav3{
width:740px;
height:300px;
position: absolute;
left:220px;
top:0px;
background-color: #7FFF00;
border-radius:0px 8px 8px 0px ;
display: none;
}
.ul2 li:hover .nav3{
display: block;
}
导航菜单