纯CSS兼容多个浏览器的二级菜单
纯CSS两级下拉菜单，见得多了吧？本款完全是用CSS实现，没有任何的JavaScript代码，兼容与火狐、IE6/IE7、IE8多种浏览器
View Code
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gbk">
5 <title>Untitled Document</title>
6 <style type="text/css">
7 /*第一步设置整体样式*/
8 .menu{
9 margin:0;
10 padding:0;
11 width:600px;
12 list-style-type:none;
13 font:14px "微软雅黑"
14 }
15 .menu ul{
16 list-style:none;
17 }
18 .menu li {
19 float:left;
20 padding:0;
21 margin:0 1 0 0;
22 width:100;
23 }
24 /*第二步设置菜单项*/
25 .menu li dl{
26 width:100px;/*IE6*/
27 margin:0;
28 padding:0 0 10 0;
29
30 }
31 /*第三步设置每个项的DT部分*/
32 .menu li dt a,.menu li dt a:visited{
33 height:1em;
34 display:block;
35 color:#333;
36 text-decoration:none;
37 }
38 /*第四步设置子菜单项*/
39 .menu li dd{
40 margin:0;
41 padding:0;
42 color:#fff;
43 background:#47a;
44 }
45 /*第五步关闭子菜单*/
46 .menu li dd{display:none;}
47 /*第六步设置鼠标相应 li:hover IE6不支持写成li.hover方便JS取*/
48 .menu li.hover dd,/*IE6*/.menu li a.hover dd{
49 display:block;
50
51 }
52 .menu li:hover,/*IE6*/.menu li a:hover{
53 border:0;
54 }/*IE6*/
55 /*第七步当鼠标移动到子菜单项的改变*/
56 .menu li dd a:hover{
57 background:#147;
58 color:#9cf;
59 }
60
61 /*第九步设置IE6模式下的包含表格的超链接*/
62 .menu li a table{
63 display:block;
64 width:100px;
65 border:0px;
66 border-collapse:collapse;
67 padding:0;
68 margin:-1px;
69 font-size:1em;
70 }
71 </style>
72 <script type="text/javascript">
73 function show(Obj)
74 {
75 Obj.className="hover";
76 }
77 function hide(Obj)
78 {
79 Obj.className="";
80 }
81 </script>
82 </head>
83 <body>
84 <div class="menu">
85 <ul>
86 <li onmousemove="show(this);" onmouseout="hide(this);">
87 <!--第八步兼容IE6在相应的地方DL套在一个TABLE中并包含在超链接中-->
88 <!--if ie 6><a href="#nogo"><table><tr><td><end if-->
89 <dl>
90 <dt><a href="#">新闻</a></dt>
91 <dd><a href="#">本地新闻</a></dd>
92 <dd><a href="#">国内新闻</a></dd>
93 <dd><a href="#">军事新闻</a></dd>
94 </dl>
95 <!--if ie 6></td></tr></table></a><end if-->
96
97 </li>
98 <!--if ie 6><a href="#nogo"><table><tr><td><end if-->
99 <li onmousemove="show(this);" onmouseout="hide(this);">
100 <dl>
101 <dt><a href="#">产品</a></dt>
102 <dd><a href="#">本地产品</a></dd>
103 <dd><a href="#">国内产品</a></dd>
104 <dd><a href="#">军需产品</a></dd>
105 </dl>
106 <!--if ie 6></td></tr></table></a><end if-->
107 </li>
108 <li onmousemove="show(this);" onmouseout="hide(this);">
109 <!--if ie 6><a href="#nogo"><table><tr><td><end if-->
110 <dl>
111 <dt><a href="#">商城</a></dt>
112 <dd><a href="#">实体商场</a></dd>
113 <dd><a href="#">虚拟商场</a></dd>
114
115 </dl>
116 <!--if ie 6></td></tr></table></a><end if-->
117 </li>
118 </ul>
119 </div>
120 </body>
121 </html>
