CSS實例教程：UL制作CSS橫向菜單藍綠色調_DIV+CSS實例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

我們今天學習讓菜單有一個矩形的背景，并且當鼠標激活時能有所變化（hover）。廢話不多說了，讓我們開始吧！

示例代碼 [www.zhaotila.cn]

<ul id="nav">
<li><a href="http://www.zhaotila.cn/">Div CSS教程</a></li>
<li><a href="http://www.zhaotila.cn/">CSS布局實例</a></li>
<li><a href="http://www.zhaotila.cn/">CSS2.0教程</a></li>
<li><a href="http://www.zhaotila.cn/">CSS酷站欣賞</a></li>
<li><a href="http://www.zhaotila.cn/">CSS模板下載</a></li>
</ul>

　　這幾行HTML代碼，大家都不生疏，它是菜單的根基，有了它我們可以通過CSS進行樣式定制。

示例代碼 [www.zhaotila.cn]

#nav {
font-size:12px;
margin:0;
padding:0;
white-space:nowrap;
}

　　我們定義無序列表nav的外邊距及填充均為零，并設計字體大小為12px。
　　我們不希望菜單還未結束就另起一行，我們強制在同一行內顯示所有文本，直到文本結束或者遭遇br對象。

示例代碼 [www.zhaotila.cn]

#nav li {
display:inline;
list-style-type: none;
}
#nav li a {
padding:5px 8px;
line-height:22px;
}

　　display:inline;內聯（行內）,將li限制在一行來顯示；
　　list-style-type: none; 列表項預設標記為無；
　　padding:5px 8px;設置鏈接的填充，上下為5px左右為8px；
　　line-height:22px;設置鏈接的行高為22px。

示例代碼 [www.zhaotila.cn]

#nav li a:link,#nav li a:visited {
color:#fff;
text-decoration:none;
background:#06f;
}
#nav li a:hover {
background-color: #090;
}

　　上面的代碼是本文的重點，我們定義鏈接的link、visited。
　　color:#fff;字體顏色為白色；
　　text-decoration:none;去除了鏈接文字的下劃線；
　　background:#06f;鏈接在link、visited狀態下背景色為藍色。
　　a:hover狀態下background-color: #090;　鼠標激活狀態鏈接的背景色為綠色。

　　至此我們就完成了這個實例，CSS橫向菜單藍綠色調的制作，最終效果：