CSS導航欄及下拉選單

       導航欄對於一個網站來說非常重要，熟練地使用CSS可以轉換成好看的導航欄而不是枯燥的HTML選單。導航欄基本上是一個連結列表，所以使用 <ul></ul>和 <li></li> 元素非常有意義，導航欄就是建立在列表標籤的精確熟練使用上。

小複習：偽類的使用方法（圖片來源於W3Cschool）

（一）垂直導航欄示例

     <div>
		<ul>
			<li>
				<a href="#">Formerly</a>
			</li>
			<li>
				<a href="#">Now</a>
			</li>
			<li>
				<a href="#">Future</a>
			</li>
			<li>
				<a href="#">Someone</a>
			</li>
		</ul>
	</div>

* {
	padding: 0px;
	margin: 0px;
}
div{
	margin-left: 200px;
	margin-top: 200px;
}
ul {
	list-style-type: none;
}

a:link,
a:visited {
	/*顯示塊元素的連結，它允許給寬度*/
	display: block;
	font-weight: bold;
	color: #FFFFFF;
	background-color: pink;
	width: 120px;
	text-align: center;
	padding: 4px;
	text-decoration: none;
	text-transform: uppercase;
}

a:hover,
a:active {
	background-color: palevioletred;
}

演示圖（圖左是正常顯示的效果，圖右是沒有新增display屬性的效果）：

（二）橫向導航欄示例

有兩種實現橫向導航的方法：內聯列表項和浮動列表項。

• 使用內聯列表項實現，刪除上述CSS程式碼中的display: block;屬性，新增如下屬性：

  ul li{
  	display: inline;
  }

  演示圖：

• 使用浮動列表項實現，浮動列表項可以使每一部分<li></li>具有相同的寬度。在原有CSS程式碼的基礎上，新增如下屬性：

ul li{
  float:left;
}

演示圖：

（三）下拉選單導航

html程式碼：

        <ul>
			<li>
				<a>One</a>
			</li>
			<li>
				<a>Two</a>
			</li>
			<div class="press">
				<a class="nav"  href="#">Three</a>
				<div class="nav-con">
					<a href="#">111</a>
					<a href="#">222</a>
					<a href="#">333</a>
				</div>
			</div>
		</ul>

樣式程式碼：

* {
	padding: 0px;
	margin: 0px;
}
ul{
	list-style-type: none;
	overflow: hidden;
	background-color: papayawhip;
}	
ul li{
	float: left;
}
li a, .nav{
	display: inline-block;
	color: brown;
	text-align: center;
	padding: 14px  16px;
	text-decoration: none;
}
li a:hover, .press:hover  .nav{
	background-color: peachpuff;
}
.press{
	display: inline-block;
}
.nav-con{
	display: none;
    position: absolute;
    background-color: papayawhip;
    min-width: 160px;
}
.nav-con a{
	color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.nav-con  a:hover{
	background-color: peachpuff;
}
.press:hover .nav-con{
	display: block;
}

演示效果圖：

小了解：

• 子選單隱藏
• 當滑鼠移入選單時，顯示子選單
• 父級選單要使用position定位，子級選單使用absolute絕對定位時就相對父選單設定位置，會呈現下拉選單與父選單對齊效果。

---

The  past  will  always  come  and  we  will  accept  it.                                         元氣少女，加油！