<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>

可下载此网页观看及修改: