二级菜单源代码

1
<style type="text/css">
2
    #menu{/*菜单块样式*/
3
    width:280px;
4
    float: left;
5
    line-height: 30px;/*行高*/
6
    padding:20px 0px;<br />    }
7
#menu li{/*菜单块中所有菜单样式*/
8
    background: url(images/p.png) no-repeat left;/*不平铺*/
9
    list-style-type: none;
10
    border: 1px dotted #656565;
11
    box-shadow: 0 1px #fff;/*阴影*/    }
12
#menu li a{/*菜单超级链接样式*/
13
    text-decoration: none;/*去下划线*/
14
    padding-left: 20px;
15
    color: #656565;
16
    display: block;
17
    }
18
#menu li a:hover{/*超级链接悬停样式*/
19
    color: #363636;
20
    background-color: #ccc;
21
    background-image:url(images/p.png);
22
    background-repeat: no-repeat;
23
    background-position: left;
24
    }
25
.sub_menu{/*二级菜单块样式*/
26
    width: 220px;
27
    padding-bottom: 10px;
28
    position: absolute;
29
    left: 248px;
30
    top:100px;
31
    display: none;
32
    }
33
.sub_menu li a{/*耳机菜单超级链接样式*/
34
    line-height: 30px;
35
    text-align: center;<br />    }
36
#menu li:hover .sub_menu{/*悬停显示二级菜单样式*/
37
  display: block;<br />    }
38
</style>
39

40
<div id="menu">
41
<h2 align="center">景点类型</h2>
42
<ul>
43
  <li><a href="#">沙滩</a>
44
<ul id="sub_menu" class="sub_menu">
45
  <li><a href="#">亚龙湾</a></li>
46
  <li><a href="#">海棠湾</a></li>
47
  <li><a href="#">大亚湾</a></li>
48
</ul>
49
</li>
50
  <li><a href="#">水上项目</a></li>
51
  <li><a href="#">岛屿</a></li>
52
  <li><a href="#">游乐场</a></li>
53
  <li><a href="#">高尔夫</a></li>
54
</ul>
55
</div>