二級菜單源代碼

<style type="text/css">
		#menu{/*菜單塊樣式*/	
		width:280px;	
		float: left;
		line-height: 30px;/*行高*/		
		padding:20px 0px;<br />		}	
#menu li{/*菜單塊中所有菜單樣式*/
		background: url(images/p.png) no-repeat left;/*不平鋪*/	
		list-style-type: none;		
		border: 1px dotted #656565;			
		box-shadow: 0 1px #fff;/*陰影*/		}
#menu li a{/*菜單超級鏈接樣式*/
		text-decoration: none;/*去下劃線*/
		padding-left: 20px;
		color: #656565;		
		display: block;
		}
#menu li a:hover{/*超級鏈接懸停樣式*/
		color: #363636;
		background-color: #ccc;
		background-image:url(images/p.png);
		background-repeat: no-repeat;
		background-position: left;
		}
.sub_menu{/*二級菜單塊樣式*/
		width: 220px;
		padding-bottom: 10px;
		position: absolute;
		left: 248px;
		top:100px;
		display: none;
		}
.sub_menu li a{/*耳機菜單超級鏈接樣式*/
		line-height: 30px;
		text-align: center;<br />		}
#menu li:hover .sub_menu{/*懸停顯示二級菜單樣式*/
	display: block;<br />		}
</style>

<div id="menu">
<h2 align="center">景點類型</h2>
<ul>
 	<li><a href="#">沙灘</a>
<ul id="sub_menu" class="sub_menu">
 	<li><a href="#">亞龍灣</a></li>
 	<li><a href="#">海棠灣</a></li>
 	<li><a href="#">大亞灣</a></li>
</ul>
</li>
 	<li><a href="#">水上項目</a></li>
 	<li><a href="#">島嶼</a></li>
 	<li><a href="#">游樂場</a></li>
 	<li><a href="#">高爾夫</a></li>
</ul>
</div>

可下載此網頁觀看及修改：