CSS實現橫嚮導航菜單

CSS實現橫嚮導航菜單教程，一步一步教你製作。
 

主題代碼部分：

 

  
<ul id="nav"> 
  
    <li><a href="http://www.alixixi.com/">CSS趨勢</a></li> 
  
    <li><a href="http://www.alixixi.com/">CSS教程</a></li> 
  
    <li><a href="http://www.alixixi.com/">CSS執行個體</a></li> 
  
    <li><a href="http://www.alixixi.com/">CSS模板</a></li> 
  
    <li><a href="http://www.alixixi.com/">CSS酷站</a></li> 
  
    <li><a href="http://www.alixixi.com/">常用代碼</a></li> 
  
    <li><a href="http://www.alixixi.com/">建站工具</a></li> 
  
</ul> 
 

我們詳細的解釋與說明CSS代碼，看它是如何控制這個UL LI打造CSS橫向菜單的先看CSS代碼：

 

  
* {  
  
    font-size:12px;  
  
    text-align:center;  
  
}  
  
#nav {  
  
    width:520px;  
  
    border-bottom:1px solid #06f;  
  
    margin:20px auto 0 auto;  
  
}  
  
#nav li {  
  
    display: inline;  
  
    list-style-type: none;  
  
}  
  
#nav li a:link,#nav li a:visited {  
  
    float:left;  
  
    margin-right:5px;  
  
    padding:5px 10px 5px 8px;  
  
    text-decoration: none;  
  
    color:#000;  
  
    background:#ffe67d;  
  
    border-left: 5px solid #fc0;  
  
}  
  
#nav li a:hover {  
  
    color:#060;  
  
    border-left: 5px solid #f60;  
  
} 
 

 

　　首頁我們進行了整體布局聲明，聲明了文字大小及置中的對齊。需要說明的是，在ff中，我們設定margin:0 auto。即可實現容器的置中了，但在IE中，這還不夠，還需要在父容器中聲明text-align:center。這一點我們要記得，不然容易出錯。

　　聲明UL無序列表的寬度為520ox，下邊框一象素的實現，顏色為#06f。我們設定了nav這個UL，距離頂部為20px、距離底部為零，左右的距離為auto。這就實現了nav在水平方向內是置中的，垂直方面上距離瀏覽器視窗20px。

　　聲明LI清單項目為內聯（行內）顯示，列表預設標記為無。

　　我們重點需要理解#nav li a:link,#nav li a:visited的定義，設定連結的樣式。

　　向左浮動，並且右邊距為5px。這是設定連結元素從左向右排行，並且元素之間的右部間隔5px。

　　設定填充，頂5px、右10px、下5px、左8px。這一設定可以使我們的連結文字處於合適的位置。

　　取消連結文字的底線，並設定連結文字的顏色為#000。連結元素的背景色為#ffe67d。

　　左邊框五象素的實線，顏色為#fc0。這一句話形成了我們的小豎條。

　　我們通過下面#nav li a:hover形成滑鼠啟用的樣式。

　　連結文字的顏色變為#060。左邊框五象素的實線，顏色為#f60。

　　這樣我們會動的小豎條菜單就製作完成了。