.nav ul li {?float:left;} //li本身是塊元素，在制作一級菜單欄要變成行內元素，也可以寫成display:inline;
.nav ul li a {?width:120px;?height:40px;?text-align:center;?line-height:40px;?display:block;?border-right:2px solid #ccc;?background:#eee;?color:#666;}//給a寫樣式，記住a標簽要轉變為塊級元素，這樣之前設置的寬高才會顯示；
2016-05-11
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>橫排二級下拉菜單</title>
<style type="text/css">
* {?margin:0;?padding:0;}
ul, li {?list-style:none;}
a {?text-decoration:none;}
.nav {?border:2px solid #ccc;?border-right:none;?overflow:hidden;?float:left;?margin:100px 0 0 300px;}
.nav ul li {?float:left;} //li本身是塊元素，在制作一級菜單欄要變成行內元素，也可以寫成display:inline;
.nav ul li a {?width:120px;?height:40px;?text-align:center;?line-height:40px;?display:block;?border-right:2px solid #ccc;?background:#eee;?color:#666;}//給a寫樣式，記住a標簽要轉變為塊級元素，這樣之前設置的寬高才會顯示；
.nav ul li a:hover{?color:#f00;?}//鼠標指到li時改變字體顏色
//?添加完二級欄目后，現在我們開始添加css樣式，首先給<li>標簽下的<ul>標簽添加相對定位，再去除之下<li>標簽的做浮動樣式，再適當修改<a>標簽
.nav ul li ul {?position:absolute;?display:none;} ?//二級標簽要隱藏
.nav ul li ul li {?float:none;}
.nav ul li ul li a {?border-right:none;?border-top:1px dotted #ccc;?background:#f5f5f5;}
.nav ul li:hover ul{?display:block;?}//由于二級標簽隱藏，現在給鼠標樣式時要寫顯示；表示鼠標指示到該元素上時則顯示
</style>
</head>
<body>
<div class="nav">
? <ul>
??? <li><a href="#">欄目一</a>
????? <ul>
??????? <li><a href="#">二級欄目</a></li>
??????? <li><a href="#">二級欄目</a></li>
??????? <li><a href="#">二級欄目</a></li>
??????? <li><a href="#">二級欄目</a></li>
????? </ul>
??? </li>
??? <li><a href="#">欄目二</a>
????? <ul>
??????? <li><a href="#">二級欄目</a></li>
??????? <li><a href="#">二級欄目</a></li>
??????? <li><a href="#">二級欄目</a></li>
??????? <li><a href="#">二級欄目</a></li>
????? </ul>
??? </li>
??? <li><a href="#">欄目三</a>
????? <ul>
??????? <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>
??? </li>
??? <li><a href="#">欄目四</a></li>
??? <li><a href="#">欄目五</a></li>
? </ul>
</div>
</body>
</html>
還有什么不明白地方再說，這個百度上有很多這樣的例子 ?你可以多練習下