符合HTML标准的下拉菜单代码

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4

<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
5

<head>
6

<title>css菜单演示</title>
8

<!--
12

*{margin:0;padding:0;border:0;}
14

body {
15

font-family: arial, 宋体, serif;
16

font-size:12px;
17

}
18

#nav {
21

line-height: 24px; list-style-type: none; background:#666;
22

}
23

#nav a {
25

display: block; width: 80px; text-align:center;
26

}
27

#nav a:link {
29

color:#666; text-decoration:none;
30

}
31

#nav a:visited {
32

color:#666;text-decoration:none;
33

}
34

#nav a:hover {
35

color:#FFF;text-decoration:none;font-weight:bold;
36

}
37

#nav li {
39

float: left; width: 80px; background:#CCC;
40

}
41

#nav li a:hover{
42

background:#999;
43

}
44

#nav li ul {
45

line-height: 27px; list-style-type: none;text-align:left;
46

left: -999em; width: 180px; position: absolute;
47

}
48

#nav li ul li{
49

float: left; width: 180px;
50

background: #F6F6F6;
51

}
52

#nav li ul a{
55

display: block; width: 156px;text-align:left;padding-left:24px;
56

}
57

#nav li ul a:link {
59

color:#666; text-decoration:none;
60

}
61

#nav li ul a:visited {
62

color:#666;text-decoration:none;
63

}
64

#nav li ul a:hover {
65

color:#F3F3F3;text-decoration:none;font-weight:normal;
66

background:#C00;
67

}
68

#nav li:hover ul {
70

left: auto;
71

}
72

#nav li.sfhover ul {
73

left: auto;
74

}
75

#content {
76

clear: left;
77

}
78

-->
81

</style>
82

function menuFix() {
85

var sfEls = document.getElementById("nav").getElementsByTagName("li");
86

for (var i=0; i<sfEls.length; i++) {
87

sfEls[i].onmouseover=function() {
88

this.className+=(this.className.length>0? " ": "") + "sfhover";
89

}
90

sfEls[i].onMouseDown=function() {
91

this.className+=(this.className.length>0? " ": "") + "sfhover";
92

}
93

sfEls[i].onMouseUp=function() {
94

this.className+=(this.className.length>0? " ": "") + "sfhover";
95

}
96

sfEls[i].onmouseout=function() {
97

this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
98

"");
100

}
101

}
102

}
103

window.onload=menuFix;
104

105

//--><!]]></script>
106

107

</head>
108

<body>
109

110

111

<ul id="nav">
112

<li><a href="#">产品介绍</a>
113

<ul>
114

<li><a href="#">产品一</a></li>
115

<li><a href="#">产品一</a></li>
116

<li><a href="#">产品一</a></li>
117

<li><a href="#">产品一</a></li>
118

<li><a href="#">产品一</a></li>
119

<li><a href="#">产品一</a></li>
120

</ul>
121

</li>
122

<li><a href="#">服务介绍</a>
123

<ul>
124

<li><a href="#">服务二</a></li>
125

<li><a href="#">服务二</a></li>
126

<li><a href="#">服务二</a></li>
127

<li><a href="#">服务二服务二</a></li>
128

<li><a href="#">服务二服务二服务二</a></li>
129

<li><a href="#">服务二</a></li>
130

</ul>
131

</li>
132

<li><a href="#">成功案例</a>
133

<ul>
134

<li><a href="#">案例三</a></li>
135

<li><a href="#">案例</a></li>
136

<li><a href="#">案例三案例三</a></li>
137

<li><a href="#">案例三案例三案例三</a></li>
138

</ul>
139

</li>
140

<li><a href="#">关于我们</a>
141

<ul>
142

<li><a href="#">我们四</a></li>
143

<li><a href="#">我们四</a></li>
144

<li><a href="#">我们四</a></li>
145

<li><a href="#">我们四111</a></li>
146

</ul>
147

</li>
148

149

<li><a href="#">在线演示</a>
150

<ul>
151

<li><a href="#">演示</a></li>
152

<li><a href="#">演示</a></li>
153

<li><a href="#">演示</a></li>
154

<li><a href="#">演示演示演示</a></li>
155

<li><a href="#">演示演示演示</a></li>
156

<li><a href="#">演示演示</a></li>
157

<li><a href="#">演示演示演示</a></li>
158

<li><a href="#">演示演示演示演示演示</a></li>
159

</ul>
160

</li>
161

<li><a href="#">联系我们</a>
162

<ul>
163

<li><a href="#">联系联系联系联系联系</a></li>
164

<li><a href="#">联系联系联系</a></li>
165

<li><a href="#">联系</a></li>
166

<li><a href="#">联系联系</a></li>
167

<li><a href="#">联系联系</a></li>
168

<li><a href="#">联系联系联系</a></li>
169

<li><a href="#">联系联系联系</a></li>
170

</ul>
171

</li>
172

173

</ul>
174

175

</body>
176

</html>

posted on 2005-09-14 14:53 小不点2018 阅读(7293) 评论(2) 收藏举报

刷新页面返回顶部

小不点的博客

导航

公告

符合HTML标准的下拉菜单代码