HTML5與CSS3中滑鼠懸停會有下拉選單

想來這個功能剛學的時候也是懵懵懂懂、糊里糊塗的，當時在網上也是沒怎麼找到有用的資料，知道被問題困住的痛苦，一晃半年就過去了，現在我就作為過來人給大家講講：

基本程式碼如下：

<div id="nav">
<nav class="container">
<ul>
	<li><a href="ddstore.php">首頁</a></li><li>
		<a>書籍分類</a>
			<ul>
				<li>程式設計</li>
				<li>資料庫</li>
			</ul>
	</li><li>
	<a href="specials.php">特刊降價</a></li><li>
	<a href="contact_form.php">聯絡我們</a></li><li>
	<a href="about.php">關於我們</a></li><li id="menu-logo">
	<a href="my_cart.php">購物車</a></li>
</ul>
</nav>
</div>

• 簡單來說就是列表的互相巢狀，表中有表。（這裡得用無序列表！）

CSS3的程式碼示例如下：

.container{width:1000px;margin:0 auto;}
#nav nav ul li{position:relative;}
#nav nav ul ul li{background-color:#cc6600;}
#nav nav ul ul li a{border-left:1px solid black;border-right:1px solid black;border-bottom:1px solid black;}
#nav nav ul ul{visibility:hidden;position:absolute;left:-40.5px;}
#nav nav ul li:hover ul{visibility:visible;z-index:100;}
#nav nav{background-color:#cc6600;}
nav ul li{display:inline-block;}
nav ul a{display:inline-block;line-height:50px;width:90px;text-align:center;border-right:1px solid #834524;color:#ffffff;
text-decoration:none;font-size:1.6em;transition:background 0.5s linear;}
nav ul a:hover{background-color:#834524;}

• 實現滑鼠懸停下拉選單，CSS3的書寫就有點麻煩了，也是最關鍵的實現步驟；
• 首先對外層列表中的每一列設定為相對定位，即相對於其正常位置進行定位；在這裡其它的都是修飾性的，像懸停背景緩慢變化、設定超連結左邊界、各元素成塊狀分佈等。
• 我主要想說的是對錶中表的一些必要修飾，其在正常狀態下hidden，在滑鼠懸停下visible,並將層級設定成100（比其它大就可以了），在絕對位置下可以移動到其父元素的正下方比較好看。

 效果示例如下：