演示：導航欄
導航欄
擁有易於使用的導航是任何網站的重要。
使用CSS您可以將枯燥的HTML菜單成好看的導航欄。
導航欄=鏈接列表
導航條需要標準的HTML作為基礎。
在我們的例子中，我們將建立一個標準的HTML列表中的導航欄。
導航條基本上是一個鏈接列表，因此，使用<ul>和<li>元素非常有道理：
例
<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
試一試» 現在讓我們從列表中刪除子彈和邊距和填充：
例子解釋：
-
list-style-type: none;-刪除子彈。 導航欄不需要標記列表 - 設定
margin: 0;和padding: 0;刪除瀏覽器的默認設置
在上面的例子中的代碼是在垂直和水平導航欄使用的標準代碼。
垂直導航欄
要建立一個垂直導航欄，可以將樣式<a>列表中的元素中，除了上面的代碼：
例子解釋：
-
display: block;-顯示的鏈接為塊級元素，使得整個鏈接區域可點擊（不僅僅是文本），它允許我們指定的width （和padding, margin, height等，如果你想） -
width: 60px;-塊元素佔用默認提供的全部寬度。 我們要指定一個60像素寬
您還可以設置寬度<ul>並刪除寬度<a> ，當為塊元素顯示它們會佔用全部可用的寬度。 這將產生同樣的結果我們前面的例子：
垂直導航欄的例子
創建一個灰色的背景顏色基本垂直導航欄，當用戶在他們的移動鼠標改變鏈接的背景色：
例
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px
0 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
} 試一試» 主動/電流導航鏈接
添加“積極”級到目前的鏈接，讓用戶知道他/她所在的網頁：
中心鏈接和添加邊框
添加text-align:center到<li>或<a>居中的鏈接。
添加border屬性<ul>周圍添加導航欄的邊框。 如果你也想在導航欄內邊框，添加border-bottom到所有<li>元素，除了最後一項：
例
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
} 試一試» 全高固定的垂直導航欄
創建一個全高， "sticky"側邊導航：
例
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
} 試一試» 注意：這個例子可能無法在移動設備上正常工作。
水平導航欄
有兩種方法來創建水平導航欄。 使用內聯或浮動列表項。
內聯列表項
建立一個橫向導航欄的一個方法是指定<li>元素為內聯，除了"standard"上面的代碼：
例子解釋：
-
display: inline;-默認情況下， <li>元素是塊元素。 在這裡，我們刪除前行打破每個表項後，在一行中顯示它們
浮動列表項
創建水平導航欄的另一種方式是浮動<li>元素，並指定導航鏈接的佈局：
例子解釋：
-
float: left;-使用浮動來獲得塊元素旁邊彼此滑動 -
display: block;-顯示的鏈接為塊級元素，使得整個鏈接區域可點擊（不僅僅是文本），它可以讓我們（和指定填充height, width, margins ，如果你想等） -
padding: 8px;-由於塊元素佔用全部可用的寬度，他們不能彼此相鄰浮動。 因此，指定一些填充，使它們看起來好 -
background-color: #dddddd;-灰色背景色添加到每個元素
提示：添加背景色，以<ul>而不是每個<a>元素，如果你想有一個全寬背景色：
水平導航欄的例子
創建一個黑暗的背景顏色的基本水平的導航欄，當用戶在他們的移動鼠標改變鏈接的背景色：
例
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
} 試一試» 主動/電流導航鏈接
添加"active"類目前的鏈接，讓用戶知道他/她所在的網頁：
右對齊鏈接
右對齊的聯繫浮動的列表項的權利（ float:right; ）：
例
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul> 試一試» 邊境分頻器
添加border-right屬性<li>創建鏈接分頻器：
例
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
} 試一試» 固定導航欄
使導航欄留在頁面頂部或底部，用戶滾動甚至當頁面：
注：這些例子可能無法在移動設備上正常工作。
蒼蒼橫導航欄
用薄灰色邊框灰色的水平導航欄的一個例子：
更多示例
響應Topnav
如何使用CSS3媒體查詢創建響應頂部導航。
響應Sidenav
如何使用CSS3媒體查詢創建響應側邊導航。
下拉導航欄
如何添加一個下拉菜單的導航欄裡面。