CSS執行個體教程：用列表ul製作CSS橫向菜單的基礎知識

在前面的文章中學習《用列表ul製作CSS橫向菜單的基礎知識》/article.asp?id=395。實現的原理我們都能理解了，但這樣的菜單還遠遠不能滿足我們的需要，我們需要製作出比較美觀的菜單，我們今天學習讓菜單有一個矩形的背景，並且當滑鼠啟用時能有所變化（hover）。廢話不多說了，讓我們開始吧！
<ul id="nav">
      <li><a href="http://www.111cn.net/">Div+CSS教程</a></li>
      <li><a href="http://www.111cn.net/">CSS布局執行個體</a></li>
      <li><a href="http://www.111cn.net/">CSS2.0教程</a></li>
      <li><a href="http://www.111cn.net/">CSS酷站欣賞</a></li>
      <li><a href="http://www.111cn.net/">CSS模板下載</a></li>
</ul>
　　這幾行HTML代碼，大家都不陌生，它是菜單的根基，有了它我們可以通過CSS進行樣式定製。
#nav {
      font-size:12px;
      margin:0;
      padding:0;
      white-space:nowrap;
}
　　我們定義無序列表nav的外邊距及填充均為零，並設計字型大小為12px。
　　我們不希望菜單還未結束就另起一行，我們強制在同一行內顯示所有文本，直到文本結束或者遭遇br對象。
#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。