<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>
可下載此網頁觀看及修改：