导航菜单主要是由列表做出来的。不同的导航菜单还需要与<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;
	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="">菜单一</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;

        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;

}