横向下拉菜单 – 筚路蓝缕

&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;meta http-equiv="Content-Language" content="zh-CN" /&gt;
&lt;title&gt;横向下拉菜单&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 {
	height: 24px;
	list-style-type: none;
	padding-left:200px;
	line-height:24px;
	overflow:hidden;
	background:#999;
}
#nav a {
	display: block;
	width: 80px;
	text-align:center;
}
#nav a:link {
	color:#EEE;
	text-decoration:none;
}
#nav a:visited {
	color:#EEE;
	text-decoration:none;
}
#nav a:hover {
	color:#FFF;
	text-decoration:none;
	font-weight:bold;
	background:#CCC;
}
#nav li {
	float: left;
	width: 80px;
}
#nav li ul {
	line-height: 24px;
	list-style-type: none;
	text-align:left;
	left: -999px;
	width: 520px;
	//注意,这里一定要设置宽度;
	position: absolute;
	background:#CCC;
}
#nav li ul li {
	float: left;
	width: 80px;
	//float就是子菜单横向的关键,可以继承父菜单而省略float
}
#nav li ul a {
	display: block;
	width: 65px;
	text-align:left;
	padding-left:15px;
}
#nav li ul a:link {
	color:#F1F1F1;
	text-decoration:none;
}
#nav li ul a:visited {
	color:#F1F1F1;
	text-decoration:none;
}
#nav li ul a:hover {
	color:#FFF;
	text-decoration:none;
	font-weight:normal;
	background:#C00;
}
#nav li:hover ul {
	left:25%;
}
#nav li.sfhover ul {
	left:25%;
}
#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;/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;/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;/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;/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;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&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

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

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

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

<head>

<title>横向下拉菜单</title>

<!--

* {

margin:0;

padding:0;

border:0;

}

body {

font-family: arial, 宋体, serif;

font-size:12px;

}

#nav {

height: 24px;

list-style-type: none;

padding-left:200px;

line-height:24px;

overflow:hidden;

background:#999;

}

#nav a {

display: block;

width: 80px;

text-align:center;

}

#nav a:link {

color:#EEE;

text-decoration:none;

}

#nav a:visited {

color:#EEE;

text-decoration:none;

}

#nav a:hover {

color:#FFF;

text-decoration:none;

font-weight:bold;

background:#CCC;

}

#nav li {

float: left;

width: 80px;

}

#nav li ul {

line-height: 24px;

list-style-type: none;

text-align:left;

left: -999px;

width: 520px;

//注意,这里一定要设置宽度;

position: absolute;

background:#CCC;

}

#nav li ul li {

float: left;

width: 80px;

//float就是子菜单横向的关键,可以继承父菜单而省略float

}

#nav li ul a {

display: block;

width: 65px;

text-align:left;

padding-left:15px;

}

#nav li ul a:link {

color:#F1F1F1;

text-decoration:none;

}

#nav li ul a:visited {

color:#F1F1F1;

text-decoration:none;

}

#nav li ul a:hover {

color:#FFF;

text-decoration:none;

font-weight:normal;

background:#C00;

}

#nav li:hover ul {

left:25%;

}

#nav li.sfhover ul {

left:25%;

}

#content {

clear: left;

}

-->

</style>

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>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

</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

发表回复 取消回复

相关文章

发表回复取消回复