CSS下拉菜单演示 – 筚路蓝缕

&lt;!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;CSS下拉菜单演示&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!--
*{margin:0;padding:0;border:0;}
body {
font-family: arial, 宋体, serif;
font-size:12px;
}
#nav {
line-height: 24px; list-style-type: none; background:#666;
}
#nav a {
display: block; width: 80px; text-align:center;
}
#nav a:link {
color:#666; text-decoration:none;
}
#nav a:visited {
color:#666;text-decoration:none;
}
#nav a:hover {
color:#FFF;text-decoration:none;font-weight:bold;
}
#nav li {
float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
background:#999;
}
#nav li ul {
line-height: 27px; list-style-type: none;text-align:left;
left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
float: left; width: 180px;
background: #F6F6F6;
}
#nav li ul a{ wedisplay: block; width: 156px;text-align:left;padding-left:24px;
}
#nav li ul a:link {
color:#666; text-decoration:none;
}
#nav li ul a:visited {
color:#666;text-decoration:none;
}
#nav li ul a:hover {
color:#F3F3F3;text-decoration:none;font-weight:normal;
background:#C00;
}
#nav li:hover ul {
left: auto;
}
#nav li.sfhover ul {
left: auto;
}
#content {
clear: left;
}
--&gt;
&lt;/style&gt;
&lt;script type=text/javascript&gt;
&lt;!--//--&gt;&lt;![CDATA[//&gt;&lt;!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i&lt;sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length&gt;0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length&gt;0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length&gt;0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\b"),
"");
}
}
}
window.onload=menuFix;
//--&gt;&lt;!]]&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul id="nav"&gt;
&lt;li&gt;&lt;a href="#"&gt;产品介绍&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;产品一&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;服务介绍&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;服务二服务二&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;服务二服务二服务二&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;服务二&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;成功案例&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;案例三&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;案例&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;案例三案例三&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;案例三案例三案例三&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;关于我们&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;我们四&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;我们四&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;我们四&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;我们四111&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;在线演示&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;演示&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;演示&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;演示&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;演示演示演示&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;演示演示演示&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;演示演示&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;演示演示演示&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;演示演示演示演示演示&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;联系我们&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;联系联系联系联系联系&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;联系联系联系&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;联系&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;联系联系&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;联系联系&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;联系联系联系&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;联系联系联系&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>CSS下拉菜单演示</title>

<!--

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

body {

font-family: arial, 宋体, serif;

font-size:12px;

}

#nav {

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

}

#nav a {

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

}

#nav a:link {

color:#666; text-decoration:none;

}

#nav a:visited {

color:#666;text-decoration:none;

}

#nav a:hover {

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

}

#nav li {

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

}

#nav li a:hover{

background:#999;

}

#nav li ul {

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

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

}

#nav li ul li{

float: left; width: 180px;

background: #F6F6F6;

}

#nav li ul a{ wedisplay: block; width: 156px;text-align:left;padding-left:24px;

}

#nav li ul a:link {

color:#666; text-decoration:none;

}

#nav li ul a:visited {

color:#666;text-decoration:none;

}

#nav li ul a:hover {

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

background:#C00;

}

#nav li:hover ul {

left: auto;

}

#nav li.sfhover ul {

left: auto;

}

#content {

clear: left;

}

-->

</style>

<![CDATA[//><!--

function menuFix() {

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

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

sfEls[i].onmouseover=function() {

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

}

sfEls[i].onMouseDown=function() {

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

}

sfEls[i].onMouseUp=function() {

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

}

sfEls[i].onmouseout=function() {

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

"");

}

window.onload=menuFix;

//--><!]]>

</script>

</head>

<body>

<ul>

</ul>

</li>

<ul>

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

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

</ul>

</li>

<ul>

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

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

</ul>

</li>

<ul>

</ul>

</li>

<ul>

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

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

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

</ul>

</li>

<ul>

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

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

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

</ul>

</li>

</ul>

</body>

</html>

2025 年 7 月
一	二	三	四	五	六	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

发表回复 取消回复

相关文章

发表回复取消回复