导航菜单

转载： http://www.cnblogs.com/hellokitty1/p/3984871.html

导航菜单主要是由列表做出来的。不同的导航菜单还需要与<div>相结合来完成的。  

一种菜单式横着的：

代码如下写：

HTML：

<ul>
	<li><a href="#">业界</a></li>
	<li><a href="#">云计算</a></li>
	<li><a href="#">移动</a></li>
	<li><a href="#">研发</a></li>
</ul>	<li><a class="#">程序员 </a></li>

css:

ul{
	list-style:none;
	}
	li{
	width:80px;
	height:50px;
	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{
	}

一种是竖着的与横着的都有的：

HTML：

<div class="nav1">
	<ul class="ul1">
	<li id="lione" style="width:220px; text-align: left">
	<a href="#">菜单一</a>
	<div class="nav2">
	<ul class="ul2">
	<li>
	<a href="#">菜单一</a>
	<div class="nav3">
	<a href="#"> 来点我！</a>
	</div>
	</li>
	<li>
	<a href="#">菜单二</a>
	<div class="nav3">菜单二</div>
	</li>
	<li>
	<a href="#">菜单三</a>
	<div class="nav3">菜单三</div>
	</li>
	</ul>
	</div>
	</li>
	<li><a href="#">菜单二</a></li>
	<li><a href="#">菜单三</a></li>
	<li><a href="#">菜单四</a></li>
	<li><a href="#">菜单五</a></li>
	<li><a href="#">菜单六</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;
       
}

 .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{
  
 }

.nav2{
    width:220px;
    height: 300px;
    display: none;
    position: relative;
}


.ul2 li{
    float:none;
   
    width:100%;
    text-align: left;
}

#lione:hover .nav2{
     display: block;
}


.nav3{
    width:740px;
    height:300px;
    position: absolute;
    left:220px;
    top:0px;
   
    border-radius:0px 8px 8px 0px ;
    display: none;
}

.ul2 li:hover .nav3{
    display: block;
}