筚路蓝缕

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;
&lt;meta name="Keywords" content="bilingual menu,中英文双语菜单" /&gt;
&lt;meta http-equiv="Description" content="完全用CSS实现的中英文双语导航菜单" /&gt;
&lt;meta content="all" name="robots" /&gt;
&lt;meta name="author" content="forestgan" /&gt;
&lt;meta name="copyright" content="http://www.forest53.com" /&gt;
&lt;title&gt;完全用CSS实现的中英文双语导航菜单&lt;/title&gt;
&lt;style type="text/css"&gt;
a{
color: #FFFF99;
text-decoration: none;
}
a:hover{
color: #FFFFFF;
text-decoration: underline;
}
#nav{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
margin: 1em 0 0;
list-style:none;
}
#nav li{
float: left;
margin-right: 1px;
}
.bi{
position: relative;
z-index: 0;
}
.bi:hover{
z-index: 99;
}
.bi:hover span{
visibility: visible;
top: 0;
left: 0;
cursor: pointer;
}
.bi span{
position: absolute;
left: -999em;
visibility: hidden;
}
#nav li a,.bi:hover span{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}
#nav li a:hover,.bi:hover span{
color: #FFFFFF;
background: #DC4E1B;
}
.bi:hover span{
padding-top: 2px;
}
#navbar{
background: #DC4E1B;
height: 8px;
overflow: hidden;
clear: both;
}
&lt;/style&gt;
&lt;link href="../css/main.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="top"&gt;
&lt;ul id="nav"&gt;
&lt;li&gt;&lt;a class="bi" href="Http://www.junstudio.org/"&gt;Home&lt;span&gt;首　页&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="bi" href="Http://www.junstudio.org/blog"&gt;Blog&lt;span&gt;日志&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="bi" href="Http://www.junstudio.org/guestbook"&gt;guestbook&lt;span&gt;留言本&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="bi" href="Http://www.pickbar.com/"&gt;Pickbar&lt;span&gt;精品吧&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class="bi" href="Http://www.fansir.com/"&gt;fansir&lt;span&gt;樊SIR&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;div id="navbar"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>完全用CSS实现的中英文双语导航菜单</title>

color: #FFFF99;

text-decoration: none;

}

a:hover{

color: #FFFFFF;

text-decoration: underline;

}

#nav{

padding: 10px 10px 0;

font-size: 12px;

font-weight: bold;

margin: 1em 0 0;

list-style:none;

}

#nav li{

float: left;

margin-right: 1px;

}

.bi{

position: relative;

z-index: 0;

}

.bi:hover{

z-index: 99;

}

.bi:hover span{

visibility: visible;

top: 0;

left: 0;

cursor: pointer;

}

.bi span{

position: absolute;

left: -999em;

visibility: hidden;

}

#nav li a,.bi:hover span{

line-height: 20px;

text-decoration: none;

background: #DDDDDD;

color: #666666;

display: block;

width: 80px;

text-align: center;

}

#nav li a:hover,.bi:hover span{

color: #FFFFFF;

background: #DC4E1B;

}

.bi:hover span{

padding-top: 2px;

}

#navbar{

background: #DC4E1B;

height: 8px;

overflow: hidden;

clear: both;

}

</style>

</head>

<body>

<li><a class="bi" href="Http://www.junstudio.org/guestbook">guestbook<span>留言本</span></a></li>

<li><a class="bi" href="Http://www.pickbar.com/">Pickbar<span>精品吧</span></a></li>

<li><a class="bi" href="Http://www.fansir.com/">fansir<span>樊SIR</span></a></li>

</ul>

</body>

</html>

UI2007年5月31日2011年10月15日

CSS Menu – Vertical

&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"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;CSS Menu - Vertical&lt;/title&gt;
&lt;style type="text/css"&gt;
body {
	margin: 0;
	padding: 30px;
	background: #FFF;
	color: #666;
}
h1 {
	font: bold 16px Arial, Helvetica, sans-serif;
}
p {
	font: 11px Arial, Helvetica, sans-serif;
}
a {
	color: #900;
	text-decoration: none;
}
a:hover {
	background: #900;
	color: #FFF;
}
/*CSS Code for Menu Begin:*/
/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
	margin: 0;
	border: 0 none;
	padding: 0;
	width: 160px;
	/*For KHTML*/
	list-style: none;
}
ul#navmenu li {
	display: block !important;
	/*For GOOD browsers*/
	display: inline;
	/*For IE*/
	position: relative;
}
/* Root Menu */
ul#navmenu a {
	border: 1px solid #FFF;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	padding: 0 6px;
	display: block;
	background: #EEE;
	color: #666;
	font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	height: auto !important;
	height: 1%;
	/*For IE*/
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
	background: #CCC;
	color: #FFF;
}
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
	background: #EEE;
	color: #666;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
	background: #CCC;
	color: #FFF;
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
	background: #EEE;
	color: #666;
}
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
	background: #CCC;
	color: #FFF;
}
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
	background: #EEE;
	color: #666;
}
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
	background: #CCC;
	color: #FFF;
}
ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
	display: none;
	position: absolute;
	top: 0;
	left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
	display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
	display: block;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
&lt;!--
navHover = function() {
	var lis = document.getElementById("navmenu").getElementsByTagName("LI");
	for (var i=0; i&lt;lis.length; i++) {
		lis[i].onmouseover=function() {
			this.className+=" iehover";
		}
		lis[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
--&gt;
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;CSS Menu - Vertical&lt;/h1&gt;
&lt;hr /&gt;
&lt;ul id="navmenu"&gt;
&lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Work +&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Websites +&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;qrayg&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;qArcade&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;qLoM&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;qDT&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Pen and Ink&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Free Interfaces&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Learn +&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Fireworks +&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;aquaButton&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;aquaButton2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;aquaButton3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&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

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

179

180

181

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

<head>

<title>CSS Menu - Vertical</title>

body {

margin: 0;

padding: 30px;

background: #FFF;

color: #666;

}

h1 {

font: bold 16px Arial, Helvetica, sans-serif;

}

p {

font: 11px Arial, Helvetica, sans-serif;

}

a {

color: #900;

text-decoration: none;

}

a:hover {

background: #900;

color: #FFF;

}

/*CSS Code for Menu Begin:*/

/* Root = Vertical, Secondary = Vertical */

ul#navmenu,

ul#navmenu li,

ul#navmenu ul {

margin: 0;

border: 0 none;

padding: 0;

width: 160px;

/*For KHTML*/

list-style: none;

}

ul#navmenu li {

display: block !important;

/*For GOOD browsers*/

display: inline;

/*For IE*/

position: relative;

}

/* Root Menu */

ul#navmenu a {

border: 1px solid #FFF;

border-right-color: #CCC;

border-bottom-color: #CCC;

padding: 0 6px;

display: block;

background: #EEE;

color: #666;

font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;

text-decoration: none;

height: auto !important;

height: 1%;

/*For IE*/

}

/* Root Menu Hover Persistence */

ul#navmenu a:hover,

ul#navmenu li:hover a,

ul#navmenu li.iehover a {

background: #CCC;

color: #FFF;

}

/* 2nd Menu */

ul#navmenu li:hover li a,

ul#navmenu li.iehover li a {

background: #EEE;

color: #666;

}

/* 2nd Menu Hover Persistence */

ul#navmenu li:hover li a:hover,

ul#navmenu li:hover li:hover a,

ul#navmenu li.iehover li a:hover,

ul#navmenu li.iehover li.iehover a {

background: #CCC;

color: #FFF;

}

/* 3rd Menu */

ul#navmenu li:hover li:hover li a,

ul#navmenu li.iehover li.iehover li a {

background: #EEE;

color: #666;

}

/* 3rd Menu Hover Persistence */

ul#navmenu li:hover li:hover li a:hover,

ul#navmenu li:hover li:hover li:hover a,

ul#navmenu li.iehover li.iehover li a:hover,

ul#navmenu li.iehover li.iehover li.iehover a {

background: #CCC;

color: #FFF;

}

/* 4th Menu */

ul#navmenu li:hover li:hover li:hover li a,

ul#navmenu li.iehover li.iehover li.iehover li a {

background: #EEE;

color: #666;

}

/* 4th Menu Hover */

ul#navmenu li:hover li:hover li:hover li a:hover,

ul#navmenu li.iehover li.iehover li.iehover li a:hover {

background: #CCC;

color: #FFF;

}

ul#navmenu ul,

ul#navmenu ul ul,

ul#navmenu ul ul ul {

display: none;

position: absolute;

top: 0;

left: 160px;

}

/* Do Not Move - Must Come Before display:block for Gecko */

ul#navmenu li:hover ul ul,

ul#navmenu li:hover ul ul ul,

ul#navmenu li.iehover ul ul,

ul#navmenu li.iehover ul ul ul {

display: none;

}

ul#navmenu li:hover ul,

ul#navmenu ul li:hover ul,

ul#navmenu ul ul li:hover ul,

ul#navmenu li.iehover ul,

ul#navmenu ul li.iehover ul,

ul#navmenu ul ul li.iehover ul {

display: block;

}

</style>

<!--

navHover = function() {

var lis = document.getElementById("navmenu").getElementsByTagName("LI");

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

lis[i].onmouseover=function() {

this.className+=" iehover";

}

lis[i].onmouseout=function() {

this.className=this.className.replace(new RegExp(" iehover\b"), "");

}

if (window.attachEvent) window.attachEvent("onload", navHover);

-->

</script>

</head>

<body>

<h1>CSS Menu - Vertical</h1>

<hr />

<ul>

<li><a href="#">Websites +</a>

<ul>

<li><a href="#">qrayg</a></li>

<li><a href="#">qArcade</a></li>

</ul>

</li>

<li><a href="#">Free Interfaces</a></li>

</ul>

</li>

<li><a href="#">Learn +</a>

<ul>

<li><a href="#">Fireworks +</a>

<ul>

<li><a href="#">aquaButton</a></li>

<li><a href="#">aquaButton2</a></li>

<li><a href="#">aquaButton3</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>

UI2007年5月31日2011年10月15日

CSS Menu – Horizontal

&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"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;CSS Menu - Horizontal&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!--
@import"dhtml-horiz.css";
--&gt;
body {
	margin: 0;
	padding: 30px;
	background: #FFF;
	color: #666;
}
h1 {
	font: bold 16px Arial, Helvetica, sans-serif;
}
p {
	font: 11px Arial, Helvetica, sans-serif;
}
a {
	color: #900;
	text-decoration: none;
}
a:hover {
	background: #900;
	color: #FFF;
}
/*CSS Code for Menu Begin:*/
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
	margin: 0;
	border: 0 none;
	padding: 0;
	width: 500px;
	/*For KHTML*/
	list-style: none;
	height: 24px;
}
ul#navmenu li {
	margin: 0;
	border: 0 none;
	padding: 0;
	float: left;
	/*For Gecko*/
	display: inline;
	list-style: none;
	position: relative;
	height: 24px;
}
ul#navmenu ul {
	margin: 0;
	border: 0 none;
	padding: 0;
	width: 160px;
	list-style: none;
	display: none;
	position: absolute;
	top: 24px;
	left: 0;
}
ul#navmenu ul li {
	float: none;
	/*For Gecko*/
	display: block !important;
	display: inline;
	/*For IE*/
}
/* Root Menu */
ul#navmenu a {
	border: 1px solid #FFF;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	padding: 0 6px;
	float: none !important;
	/*For Opera*/
	float: left;
	/*For IE*/
	display: block;
	background: #EEE;
	color: #666;
	font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	height: auto !important;
	height: 1%;
	/*For IE*/
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
	background: #CCC;
	color: #FFF;
}
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
	float: none;
	background: #EEE;
	color: #666;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
	background: #CCC;
	color: #FFF;
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
	background: #EEE;
	color: #666;
}
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
	background: #CCC;
	color: #FFF;
}
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
	background: #EEE;
	color: #666;
}
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
	background: #CCC;
	color: #FFF;
}
ul#navmenu ul ul,
ul#navmenu ul ul ul {
	display: none;
	position: absolute;
	top: 0;
	left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
	display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
	display: block;
}
&lt;/style&gt;
&lt;script type="text/JavaScript"&gt;
navHover = function() {
	var lis = document.getElementById("navmenu").getElementsByTagName("LI");
	for (var i=0; i&lt;lis.length; i++) {
		lis[i].onmouseover=function() {
			this.className+=" iehover";
		}
		lis[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" iehover\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;h1&gt;CSS Menu - Horizontal&lt;/h1&gt;
&lt;hr /&gt;
&lt;ul id="navmenu"&gt;
&lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;Work +&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Websites +&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;Websites +&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&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

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

179

180

181

182

183

184

185

186

187

188

189

190

191

192

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

<head>

<title>CSS Menu - Horizontal</title>

<!--

@import"dhtml-horiz.css";

-->

body {

margin: 0;

padding: 30px;

background: #FFF;

color: #666;

}

h1 {

font: bold 16px Arial, Helvetica, sans-serif;

}

p {

font: 11px Arial, Helvetica, sans-serif;

}

a {

color: #900;

text-decoration: none;

}

a:hover {

background: #900;

color: #FFF;

}

/*CSS Code for Menu Begin:*/

/* Root = Horizontal, Secondary = Vertical */

ul#navmenu {

margin: 0;

border: 0 none;

padding: 0;

width: 500px;

/*For KHTML*/

list-style: none;

height: 24px;

}

ul#navmenu li {

margin: 0;

border: 0 none;

padding: 0;

float: left;

/*For Gecko*/

display: inline;

list-style: none;

position: relative;

height: 24px;

}

ul#navmenu ul {

margin: 0;

border: 0 none;

padding: 0;

width: 160px;

list-style: none;

display: none;

position: absolute;

top: 24px;

left: 0;

}

ul#navmenu ul li {

float: none;

/*For Gecko*/

display: block !important;

display: inline;

/*For IE*/

}

/* Root Menu */

ul#navmenu a {

border: 1px solid #FFF;

border-right-color: #CCC;

border-bottom-color: #CCC;

padding: 0 6px;

float: none !important;

/*For Opera*/

float: left;

/*For IE*/

display: block;

background: #EEE;

color: #666;

font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;

text-decoration: none;

height: auto !important;

height: 1%;

/*For IE*/

}

/* Root Menu Hover Persistence */

ul#navmenu a:hover,

ul#navmenu li:hover a,

ul#navmenu li.iehover a {

background: #CCC;

color: #FFF;

}

/* 2nd Menu */

ul#navmenu li:hover li a,

ul#navmenu li.iehover li a {

float: none;

background: #EEE;

color: #666;

}

/* 2nd Menu Hover Persistence */

ul#navmenu li:hover li a:hover,

ul#navmenu li:hover li:hover a,

ul#navmenu li.iehover li a:hover,

ul#navmenu li.iehover li.iehover a {

background: #CCC;

color: #FFF;

}

/* 3rd Menu */

ul#navmenu li:hover li:hover li a,

ul#navmenu li.iehover li.iehover li a {

background: #EEE;

color: #666;

}

/* 3rd Menu Hover Persistence */

ul#navmenu li:hover li:hover li a:hover,

ul#navmenu li:hover li:hover li:hover a,

ul#navmenu li.iehover li.iehover li a:hover,

ul#navmenu li.iehover li.iehover li.iehover a {

background: #CCC;

color: #FFF;

}

/* 4th Menu */

ul#navmenu li:hover li:hover li:hover li a,

ul#navmenu li.iehover li.iehover li.iehover li a {

background: #EEE;

color: #666;

}

/* 4th Menu Hover */

ul#navmenu li:hover li:hover li:hover li a:hover,

ul#navmenu li.iehover li.iehover li.iehover li a:hover {

background: #CCC;

color: #FFF;

}

ul#navmenu ul ul,

ul#navmenu ul ul ul {

display: none;

position: absolute;

top: 0;

left: 160px;

}

/* Do Not Move - Must Come Before display:block for Gecko */

ul#navmenu li:hover ul ul,

ul#navmenu li:hover ul ul ul,

ul#navmenu li.iehover ul ul,

ul#navmenu li.iehover ul ul ul {

display: none;

}

ul#navmenu li:hover ul,

ul#navmenu ul li:hover ul,

ul#navmenu ul ul li:hover ul,

ul#navmenu li.iehover ul,

ul#navmenu ul li.iehover ul,

ul#navmenu ul ul li.iehover ul {

display: block;

}

</style>

navHover = function() {

var lis = document.getElementById("navmenu").getElementsByTagName("LI");

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

lis[i].onmouseover=function() {

this.className+=" iehover";

}

lis[i].onmouseout=function() {

this.className=this.className.replace(new RegExp(" iehover\b"), "");

}

if (window.attachEvent) window.attachEvent("onload", navHover);

</script>

</head>

<body>

<h1>CSS Menu - Horizontal</h1>

<hr />

<ul>

<li><a href="#">Websites +</a>

<ul>

<li><a href="#">Websites +</a>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</body>

</html>

利用cloudflare worker搭建在线代理—-jsproxy

利用Dnsmasq来搭建一个属于自己的本地DNS服务器

证书格式简介及不同格式之间的转换方式

将被O2O模式改造的6大行业：衣食住行、变美、咨询

适合小型开发团队使用的免费源代码托管服务网站

几个专业的问卷调查网站的评测

在JAVA中使用HttpSessionAttributeListener接口实现在线统计

程序错误文档指南

Hibernate.cfg.xml范例

Filter过滤器的使用

JSP的Listener监听session,application

PHP学习

轻松在线制作各种Logo标志

记住桌面图标的位置

MIndVisualizer-又一个脑图软件

GMail搜索快捷方式

方便的虚拟硬盘

IT必备的12种能力，你最欠缺那点？

RealProducerPlus v11.0教程

Kmplayer使用技巧

PHP连接ACCESS数据库

PHP中使用global

如何解决ACCESS中SELECT TOP语句竟然返回多条记录的问题？

Oracle建立序列号

JS学习

JQuery学习-一种JS框架

枚举Document对象的所有成员信息

GoogleAds广告点击统计

完全用CSS实现的中英文双语导航菜单

CSS Menu – Vertical

CSS Menu – Horizontal