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>
