只用CSS打造符合标准型下拉菜单_网页代码站(www.webdm.cn)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>只用CSS打造符合标准型下拉菜单_网页代码站(www.webdm.cn)</title>
5 </head>
6 <style>
7 <!--
8 body{
9 background-color:white;
10 font-size:12px;
11 font-family:Arial, Helvetica, sans-serif;
12 margin:0px;
13 padding:0px;
14 color:white;
15 }
16 ul,li{
17 margin:0px;
18 padding:0px;
19 }
20 li{
21 display:inline;
22 list-style:none;
23 list-style-positionutside;
24 text-align:center;
25 font-weight:bold;
26 float:left;
27 }
28 a:link{
29 color:#336601;
30 text-decoration:none;
31 float:left;
32 width:100px;
33 padding:3px 5px 0px 5px;
34 }
35 a:visited{
36 color:#336601;
37 text-decoration:none;
38 float:left;
39 padding:3px 5px 0px 5px;
40 width:100px;
41 }
42 a:hover{
43 color:white;
44 float:left;
45 width:88px;
46 text-decoration:none;
47 background-color:#539D26;
48 }
49 a:active{
50 color:white;
51 float:left;
52 padding:3px 3px 0px 20px;
53 width:88px;
54 text-decoration:none;
55 background-color:#BD06B4;
56 }
57 #nav{
58 height:30px;
59 border-bottom:0px;
60 position:absolute;
61 z-index:1;
62 }
63 .list{
64 line-height:20px;
65 text-align:center;
66 font-weight:normal;
67 }
68 .menu1{
69 width:100px;
70 height:auto;
71 border:1px solid #9CDD75;
72 background-color:#F1FBEC;
73 color:#336601;
74 overflow:hidden;
75 padding:6px 0px 0px 0px;
76 cursor:hand;
77 overflow-y:hidden;
78 filter:Alpha(opacity=70);
79 -moz-opacity:0.7;
80 }
81 .menu2{
82 width:100px;
83 height:18px;
84 overflow:hidden;
85 background-color:#F5F5F5;
86 color:#999999;
87 border:1px solid #EEE8DD;
88 padding:6px 0px 0px 0px;
89 overflow-y:hidden;
90 cursor:hand;
91 }
92 -->
93 </style>
94 <body>
95 <div id="nav">
96 <ul>
97 <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'" style="height:18px;">网站首页</li>
98 <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">公司新闻
99 <div class="list">
100 <a href="#">我的日志</a><br />
101 <a href="#">我的日志</a><br />
102 <a href="#">我的收藏</a><br />
103 </div>
104 </li>
105 <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">产品列表
106 <div class="list">
107 <a href="#">我的相册</a><br />
108 <a href="#">我的收藏</a><br />
109 </div>
110 </li>
111 <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">品牌故事
112 <div class="list">
113 <a href="#">我的日志</a><br />
114 <a href="#">我的相册</a><br />
115 <a href="#">我的收藏</a><br />
116 </div>
117 </li>
118 <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">关于我们
119 <div class="list">
120 <a href="#">我的日志</a><br />
121 <a href="#">我的相册</a><br />
122 <a href="#">我的收藏</a><br />
123 </div>
124 </li>
125 <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">美容顾问
126 <div class="list">
127 <a href="#">我的日志</a><br />
128 <a href="#">我的相册</a><br />
129 <a href="#">我的收藏</a><br />
130 </div>
131 </li>
132 <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">市场营销
133 <div class="list">
134 <a href="#">我的收藏</a><br />
135 <a href="#">我的日志</a><br />
136 <a href="#">我的相册</a><br />
137 <a href="#">我的收藏</a><br />
138 </div>
139 </li>
140 <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">加盟我们
141 <div class="list">
142 <a href="#">我的首页</a><br />
143 <a href="#">我的日志</a><br />
144 <a href="#">我的相册</a><br />
145 <a href="#">我的收藏</a><br />
146
147 </div>
148 </li>
149 <li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">客服中心
150 <div class="list">
151 <a href="#">我的日志</a><br />
152 <a href="#">我的相册</a><br />
153 <a href="#">我的收藏</a><br />
154 </div>
155 </li>
156 </ul>
157 </div>
158 </body>
159 </html>
160
161 <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
文章来自：http://www.webdm.cn/webcode/a2a05288-596d-478d-95bc-90e830f5bc54.html
