UI – 第 3 页 – 筚路蓝缕

UI2009年4月17日2011年10月15日

彩色CSS按钮

&lt;style&gt;.btn {
	BORDER-RIGHT:#7b9ebd 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#7b9ebd 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#cecfde);
	BORDER-LEFT:#7b9ebd1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#7b9ebd 1px solid
}
.btn1_mouseout {
	BORDER-RIGHT:#7EBF4F 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#7EBF4F 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#B3D997);
	BORDER-LEFT:#7EBF4F1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#7EBF4F 1px solid
}
.btn1_mouseover {
	BORDER-RIGHT:#7EBF4F 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#7EBF4F 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#CAE4B6);
	BORDER-LEFT:#7EBF4F1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#7EBF4F 1px solid
}
.btn2 {
	padding:2 4 04;
	font-size:12px;
	height:23;
	background-color:#ece9d8;
	border-width:1;
}
.btn3_mouseout {
	BORDER-RIGHT:#2C59AA 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#2C59AA 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);
	BORDER-LEFT:#2C59AA1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#2C59AA 1px solid
}
.btn3_mouseover {
	BORDER-RIGHT:#2C59AA 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#2C59AA 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#D7E7FA);
	BORDER-LEFT:#2C59AA1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#2C59AA 1px solid
}
.btn3_mousedown {
	BORDER-RIGHT:#FFE400 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#FFE400 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);
	BORDER-LEFT:#FFE4001px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#FFE400 1px solid
}
.btn3_mouseup {
	BORDER-RIGHT:#2C59AA 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#2C59AA 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);
	BORDER-LEFT:#2C59AA1px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM:#2C59AA 1px solid
}
.btn_2k3 {
	BORDER-RIGHT:#002D96 1px solid;
	PADDING-RIGHT:2px;
	BORDER-TOP:#002D96 1px solid;
	PADDING-LEFT:2px;
	FONT-SIZE:12px;
	FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFF,EndColorStr=#9DBCEA);
	BORDER-LEFT:#002D961px solid;
	CURSOR:hand;
	COLOR:black;
	PADDING-TOP:2px;
	BORDER-BOTTOM: #002D96 1px solid
}
&lt;/style&gt;
&lt;body&gt;
&lt;button class='btn'&gt;Button&lt;/button&gt;
&lt;p&gt;
&lt;/p&gt;
&lt;button class='btn1_mouseout' onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'"&gt;Button&lt;/button&gt;
&lt;button class='btn1_mouseout' onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'" disabled&gt;Button&lt;/button&gt;
&lt;p&gt;
	&lt;button class='btn2'&gt;Button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
	&lt;button class='btn3_mouseoutonmouseover="this.className='btn3_mouseover'"onmouseout="this.className='btn3_mouseout'"onmousedown="this.className='btn3_mousedown'"onmouseup="this.className='btn3_mouseup'"' onclick="this.blur();"&gt;Button&lt;/button&gt;
&lt;/p&gt;
&lt;p&gt;
	&lt;button class='btn_2k3'&gt;2k3 Button&lt;/button&gt;
&lt;/p&gt;
&lt;/body&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

<style>.btn {

BORDER-RIGHT:#7b9ebd 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#7b9ebd 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#cecfde);

BORDER-LEFT:#7b9ebd1px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM:#7b9ebd 1px solid

}

.btn1_mouseout {

BORDER-RIGHT:#7EBF4F 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#7EBF4F 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#B3D997);

BORDER-LEFT:#7EBF4F1px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM:#7EBF4F 1px solid

}

.btn1_mouseover {

BORDER-RIGHT:#7EBF4F 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#7EBF4F 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#CAE4B6);

BORDER-LEFT:#7EBF4F1px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM:#7EBF4F 1px solid

}

.btn2 {

padding:2 4 04;

font-size:12px;

height:23;

background-color:#ece9d8;

border-width:1;

}

.btn3_mouseout {

BORDER-RIGHT:#2C59AA 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#2C59AA 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);

BORDER-LEFT:#2C59AA1px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM:#2C59AA 1px solid

}

.btn3_mouseover {

BORDER-RIGHT:#2C59AA 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#2C59AA 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#D7E7FA);

BORDER-LEFT:#2C59AA1px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM:#2C59AA 1px solid

}

.btn3_mousedown {

BORDER-RIGHT:#FFE400 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#FFE400 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);

BORDER-LEFT:#FFE4001px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM:#FFE400 1px solid

}

.btn3_mouseup {

BORDER-RIGHT:#2C59AA 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#2C59AA 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#C3DAF5);

BORDER-LEFT:#2C59AA1px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM:#2C59AA 1px solid

}

.btn_2k3 {

BORDER-RIGHT:#002D96 1px solid;

PADDING-RIGHT:2px;

BORDER-TOP:#002D96 1px solid;

PADDING-LEFT:2px;

FONT-SIZE:12px;

FILTER:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFF,EndColorStr=#9DBCEA);

BORDER-LEFT:#002D961px solid;

CURSOR:hand;

COLOR:black;

PADDING-TOP:2px;

BORDER-BOTTOM: #002D96 1px solid

}

</style>

<body>

<button class='btn'>Button</button>

<p>

</p>

<button class='btn1_mouseout' onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'">Button</button>

<button class='btn1_mouseout' onmouseover="this.className='btn1_mouseover'"onmouseout="this.className='btn1_mouseout'" disabled>Button</button>

<p>

<button class='btn2'>Button</button>

</p>

<p>

<button class='btn3_mouseoutonmouseover="this.className='btn3_mouseover'"onmouseout="this.className='btn3_mouseout'"onmousedown="this.className='btn3_mousedown'"onmouseup="this.className='btn3_mouseup'"' onclick="this.blur();">Button</button>

</p>

<p>

<button class='btn_2k3'>2k3 Button</button>

</p>

</body>

UI2007年8月1日

2007年8月1日建军节

UI2007年8月1日

优秀CSS资源网站

　　学习 CSS 的朋友总是希望能获得更多的网站，去研究别人的代码，提示自己的能力。下面是一个列表，一个收集了 […]

UI2007年7月14日

Bastille Day 2007

描述:Bastille Day 介绍:法国国庆日是在每年的7月14日。以纪念在1789年7月14日，巴黎群众攻 […]

UI2007年7月9日

National Aboriginal Week

描述:NAIDOC Week 澳洲国家原住民纪念周介绍:澳洲国家原住民暨岛民纪念周－NAIDOC Week […]

UI2007年7月6日

Sochi 2014

描述:2014 Olympic Winter Games in Sotchi 索契获得2014年冬奥会举办权( […]

UI2007年7月4日

Independence Day 2007

描述:Independence Day 美国独立日

UI2007年7月2日2011年10月15日

很酷 CSS特效 – Dashboard

一个简单的教程，教你如何创建一个类似 Dashboard的页面效果。做得很酷，大致来看看过程：首先将下面的代 […]

UI2007年7月1日

Canada Day 2007

描述:Canada Day 加拿大日介绍:和平塔（PEACE TOWER），是加拿大国会大厦最高的建筑物。和 […]

UI2007年6月19日

Dragon Boat Festival 端午节(2007)

描述:Dragon Boat Festival 端午节介绍:这次logo取材于著名剪纸艺术家周玉的剪纸作品。 […]

UI2007年6月17日2020年3月26日

Father's Day(2007)

描述:Father\’s Day 父亲节

UI2007年6月17日2020年4月15日

Father’s Day(2007)

描述:Father’s Day 父亲节

UI2007年6月12日

Russia Day

描述:Russia Day 俄罗斯日介绍:1990年6月12日，俄罗斯联邦第一次人民代表大会通过了俄联邦国家 […]

UI2007年6月10日2011年10月19日

这样学HTML，还难吗？

是不是觉得写代码是件困难乏味的事？是不是觉得有了所见即所得的软件就不再需要学习代码了？对我来说，这种观念是绝对 […]

UI2007年6月2日

Italia National Day

描述:Italia National Day 意大利国庆节介绍:12-13世纪，意大利处于四分五裂状态，除王 […]

UI2007年6月1日

Children's Day 儿童节

描述:Children's Day 儿童节介绍:这幅LOGO，是清华大学信息艺术设计系教授吴冠英。吴 […]

UI2007年6月1日

Children's Day 儿童节

[img]http://www.baidu.com/img/slogo-kids-1.gif[/img] 描述 […]

UI2007年6月1日2011年10月19日

如何避免IE7中Zoom功能放大滚动条

由于现在显示器越来越大17'、19'甚至20'都很普通了，并且显示器的分辨率也越来越高 […]

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

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

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

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

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>

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

横向下拉菜单

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

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

CSS特效滚动菜单

&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"/&gt;
&lt;title&gt;css菜单&lt;/title&gt;
&lt;style&gt;body {
	background-color:#B8B8A0;
}
#fbtn {
	display:none;
	overflow:hidden;
	border-style:solid;
	border-width:1px;
	border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56;
	padding:1 1 1 1;
	width:115px;
	height:30px;
}
#fbtn_txt {
	position:relative;
}
#fbtn_txt div {
	height:30px;
	padding-top:11px;
	font-size:12px;
	color:#800080;
	text-align:center;
	cursor:hand;
}
#fbtn_mask {
	background-color:#ffffff;
	position:relative;
	width:100%;
	height: 100%;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id='fbtn'&gt;
	&lt;div id='fbtn_mask'&gt;
	&lt;/div&gt;
	&lt;div id='fbtn_txt'&gt;
		&lt;div&gt;
			G1
		&lt;/div&gt;
		&lt;div&gt;
			good morning
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;div id='fbtn'&gt;
	&lt;div id='fbtn_mask'&gt;
	&lt;/div&gt;
	&lt;div id='fbtn_txt'&gt;
		&lt;div&gt;
			G2
		&lt;/div&gt;
		&lt;div&gt;
			good evening
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;div id='fbtn'&gt;
	&lt;div id='fbtn_mask'&gt;
	&lt;/div&gt;
	&lt;div id='fbtn_txt'&gt;
		&lt;div&gt;
			M1
		&lt;/div&gt;
		&lt;div&gt;
			my name is fireyy
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;div id='fbtn'&gt;
	&lt;div id='fbtn_mask'&gt;
	&lt;/div&gt;
	&lt;div id='fbtn_txt'&gt;
		&lt;div&gt;
			M2
		&lt;/div&gt;
		&lt;div&gt;
			mm mm i love u
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;div id='fbtn'&gt;
	&lt;div id='fbtn_mask'&gt;
	&lt;/div&gt;
	&lt;div id='fbtn_txt'&gt;
		&lt;div&gt;
			G1
		&lt;/div&gt;
		&lt;div&gt;
			good morning
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;div id='fbtn'&gt;
	&lt;div id='fbtn_mask'&gt;
	&lt;/div&gt;
	&lt;div id='fbtn_txt'&gt;
		&lt;div&gt;
			G2
		&lt;/div&gt;
		&lt;div&gt;
			good evening
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;div id='fbtn'&gt;
	&lt;div id='fbtn_mask'&gt;
	&lt;/div&gt;
	&lt;div id='fbtn_txt'&gt;
		&lt;div&gt;
			M1
		&lt;/div&gt;
		&lt;div&gt;
			my name is fireyy
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;div id='fbtn'&gt;
	&lt;div id='fbtn_mask'&gt;
	&lt;/div&gt;
	&lt;div id='fbtn_txt'&gt;
		&lt;div&gt;
			M2
		&lt;/div&gt;
		&lt;div&gt;
			mm mm i love u
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;  
var current=null;
var t=null;
for (var i=0;i&lt;fbtn.length;i++) {
	fbtn_txt[i].style.posTop=-30;
	fbtn_mask[i].style.posTop=-30;
	fbtn[i].index=i;
	fbtn[i].style.display="block";
	fbtn[i].onmouseover=function() {
		if(!current) {
			current=this;
			domove(this.index);
		} else   if(current!=this) {
			domove(current.index);
			domove(this.index);
			current=this;
		}
	}
	fbtn[i].onmouseout=function() {
		if(event.toElement==this.parentElement&amp;t==this) {
			domove(this.index);
			current=null;
		}
	}
}
function domove(num) {
	var o=fbtn_txt[num];
	var m=fbtn_mask[num];
	if(o.style.posTop&lt;-60) {
		o.style.display="none";
		var t=o.children[1].innerHTML;
		o.children[1].innerHTML=o.children[0].innerHTML;
		o.children[0].innerHTML=t;
		o.style.posTop=-30;
		o.style.display="block";
		if(m.style.posTop&gt;30)  m.style.posTop=-30; else  m.style.posTop=0;
	} else {
		m.style.posTop+=3;
		o.style.posTop-=3;
		setTimeout('domove('+num+')',15);
	}
}
&lt;/script&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

<html>

<head>

<title>css菜单</title>

<style>body {

background-color:#B8B8A0;

}

#fbtn {

display:none;

overflow:hidden;

border-style:solid;

border-width:1px;

border-color:#e1e1c9 #e1e1c9 #6e6e56 #6e6e56;

padding:1 1 1 1;

width:115px;

height:30px;

}

#fbtn_txt {

position:relative;

}

#fbtn_txt div {

height:30px;

padding-top:11px;

font-size:12px;

color:#800080;

text-align:center;

cursor:hand;

}

#fbtn_mask {

background-color:#ffffff;

position:relative;

width:100%;

height: 100%;

}

</style>

</head>

<body>

</div>

<div>

</div>

<div>

good morning

</div>

</div>

<div>

</div>

<div>

good evening

</div>

</div>

<div>

</div>

<div>

my name is fireyy

</div>

</div>

<div>

</div>

<div>

mm mm i love u

</div>

</div>

<div>

</div>

<div>

good morning

</div>

</div>

<div>

</div>

<div>

good evening

</div>

</div>

<div>

</div>

<div>

my name is fireyy

</div>

</div>

<div>

</div>

<div>

mm mm i love u

</div>

var current=null;

var t=null;

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

fbtn_txt[i].style.posTop=-30;

fbtn_mask[i].style.posTop=-30;

fbtn[i].index=i;

fbtn[i].style.display="block";

fbtn[i].onmouseover=function() {

if(!current) {

current=this;

domove(this.index);

} else if(current!=this) {

domove(current.index);

domove(this.index);

current=this;

}

fbtn[i].onmouseout=function() {

if(event.toElement==this.parentElement&t==this) {

domove(this.index);

current=null;

}

function domove(num) {

var o=fbtn_txt[num];

var m=fbtn_mask[num];

if(o.style.posTop<-60) {

o.style.display="none";

var t=o.children[1].innerHTML;

o.children[1].innerHTML=o.children[0].innerHTML;

o.children[0].innerHTML=t;

o.style.posTop=-30;

o.style.display="block";

if(m.style.posTop>30) m.style.posTop=-30; else m.style.posTop=0;

} else {

m.style.posTop+=3;

o.style.posTop-=3;

setTimeout('domove('+num+')',15);

}

</script>

</body>

</html>

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

二级dropdown弹出菜单

&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;二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU&lt;/title&gt;
&lt;style type="text/css"&gt;
/* common styling */  
/* set up the overall width of the menu div, the font and the margins */    
.menu {  font-family: arial, sans-serif;   width:750px;   margin:0;   margin:50px 0;  }  
/* remove the bullets and set the margin and padding to zero for the unordered list */  
.menu ul {  padding:0;   margin:0;  list-style-type: none;  }  /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */  .menu ul li {  float:left;   position:relative;  }  /* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */  .menu ul li a, .menu ul li a:visited {  display:block;   text-align:center;   text-decoration:none;   width:104px;   height:30px;   color:#000;   border:1px solid #fff;  border-width:1px 1px 0 0;  background:#c9c9a7;   line-height:30px;   font-size:11px;  }  /* make the dropdown ul invisible */  .menu ul li ul {  display: none;  }    /* specific to non IE browsers */  /* set the background and foreground color of the main menu li on hover */  .menu ul li:hover a {  color:#fff;   background:#b3ab79;  }  /* make the sub menu ul visible and position it beneath the main menu list item */  .menu ul li:hover ul {  display:block;   position:absolute;   top:31px;   left:0;   width:105px;  }  /* style the background and foreground color of the submenu links */  .menu ul li:hover ul li a {  display:block;   background:#faeec7;   color:#000;  }  /* style the background and forground colors of the links on hover */  .menu ul li:hover ul li a:hover {  background:#dfc184;   color:#000;  }
&lt;/style&gt;
&lt;!--[if lte IE 6]&gt;    &lt;style type="text/css"&gt;  /* styling specific to Internet Explorer IE5.5 and IE6. Yet to see if IE7 handles li:hover */    /* Get rid of any default table style */  table {  border-collapse:collapse;  margin:0;   padding:0;  }  /* ignore the link used by 'other browsers' */  .menu ul li a.hide, .menu ul li a:visited.hide {  display:none;  }  /* set the background and foreground color of the main menu link on hover */  .menu ul li a:hover {  color:#fff;   background:#b3ab79;  }  /* make the sub menu ul visible and position it beneath the main menu list item */  .menu ul li a:hover ul {  display:block;   position:absolute;   top:32px;   left:0;   width:105px;  }  /* style the background and foreground color of the submenu links */  .menu ul li a:hover ul li a {  background:#faeec7;   color:#000;  }  /* style the background and forground colors of the links on hover */  .menu ul li a:hover ul li a:hover {  background:#dfc184;   color:#000;  }    &lt;/style&gt;    &lt;![endif]--&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="menu"&gt;
	&lt;ul&gt;
		&lt;li&gt;&lt;a class="hide" href="../menu/index.html"&gt;DEMOS&lt;/a&gt;
		&lt;!--[if lte IE 6]&gt;  &lt;a href="../menu/index.html"&gt;DEMOS  &lt;table&gt;&lt;tr&gt;&lt;td&gt;  &lt;![endif]--&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href="../menu/zero_dollars.html" title="The zero dollar ads page"&gt;zero dollars&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../menu/embed.html" title="Wrapping text around images"&gt;wrapping text&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../menu/form.html" title="Styling forms"&gt;styled form&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../menu/nodots.html" title="Removing active/focus borders"&gt;active focus&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../menu/shadow_boxing.html" title="Multi-position drop shadow"&gt;shadow boxing&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../menu/old_master.html" title="Image Map for detailed information"&gt;image map&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../menu/bodies.html" title="fun with background images"&gt;fun backgrounds&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../menu/fade_scroll.html" title="fade-out scrolling"&gt;fade scrolling&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../menu/em_images.html" title="em size images compared"&gt;em sized images&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
		&lt;!--[if lte IE 6]&gt;  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;  &lt;/a&gt;  &lt;![endif]--&gt;
		&lt;/li&gt;
		&lt;li&gt;&lt;a class="hide" href="index.html"&gt;MENUS&lt;/a&gt;
		&lt;!--[if lte IE 6]&gt;  &lt;a href="index.html"&gt;MENUS  &lt;table&gt;&lt;tr&gt;&lt;td&gt;  &lt;![endif]--&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href="spies.html" title="a coded list of spies"&gt;spies menu&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="vertical.html" title="a horizontal vertical menu"&gt;vertical menu&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="expand.html" title="an enlarging unordered list"&gt;enlarging list&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="enlarge.html" title="an unordered list with link images"&gt;link images&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="cross.html" title="non-rectangular links"&gt;non-rectangular&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="jigsaw.html" title="jigsaw links"&gt;jigsaw links&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="circles.html" title="circular links"&gt;circular links&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
		&lt;!--[if lte IE 6]&gt;  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;  &lt;/a&gt;  &lt;![endif]--&gt;
		&lt;/li&gt;
		&lt;li&gt;&lt;a class="hide" href="../layouts/index.html"&gt;LAYOUTS&lt;/a&gt;
		&lt;!--[if lte IE 6]&gt;  &lt;a href="../layouts/index.html"&gt;LAYOUTS  &lt;table&gt;&lt;tr&gt;&lt;td&gt;  &lt;![endif]--&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href="../layouts/bodyfix.html" title="Cross browser fixed layout"&gt;Fixed 1&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../layouts/body2.html" title="Cross browser fixed layout"&gt;Fixed 2&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../layouts/body4.html" title="Cross browser fixed layout"&gt;Fixed 3&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../layouts/body5.html" title="Cross browser fixed layout"&gt;Fixed 4&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../layouts/minimum.html" title="A simple minimum width layout"&gt;minimum width&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
		&lt;!--[if lte IE 6]&gt;  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;  &lt;/a&gt;  &lt;![endif]--&gt;
		&lt;/li&gt;
		&lt;li&gt;&lt;a class="hide" href="../boxes/index.html"&gt;BOXES&lt;/a&gt;
		&lt;!--[if lte IE 6]&gt;  &lt;a href="../boxes/index.html"&gt;BOXES  &lt;table&gt;&lt;tr&gt;&lt;td&gt;  &lt;![endif]--&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href="spies.html" title="a coded list of spies"&gt;spies menu&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="vertical.html" title="a horizontal vertical menu"&gt;vertical menu&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="expand.html" title="an enlarging unordered list"&gt;enlarging list&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="enlarge.html" title="an unordered list with link images"&gt;link images&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="cross.html" title="non-rectangular links"&gt;non-rectangular&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="jigsaw.html" title="jigsaw links"&gt;jigsaw links&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="circles.html" title="circular links"&gt;circular links&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
		&lt;!--[if lte IE 6]&gt;  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;  &lt;/a&gt;  &lt;![endif]--&gt;
		&lt;/li&gt;
		&lt;li&gt;&lt;a class="hide" href="../mozilla/index.html"&gt;MOZILLA&lt;/a&gt;
		&lt;!--[if lte IE 6]&gt;  &lt;a href="../mozilla/index.html"&gt;MOZILLA  &lt;table&gt;&lt;tr&gt;&lt;td&gt;  &lt;![endif]--&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href="../mozilla/dropdown.html" title="A drop down menu"&gt;drop down menu&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../mozilla/cascade.html" title="A cascading menu"&gt;cascading menu&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../mozilla/content.html" title="Using content:"&gt;content:&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../mozilla/moxbox.html" title=":hover applied to a div"&gt;mozzie box&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../mozilla/rainbow.html" title="I can build a rainbow"&gt;rainbow box&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../mozilla/snooker.html" title="Snooker cue"&gt;snooker cue&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../mozilla/target.html" title="Target Practise"&gt;target practise&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../mozilla/splittext.html" title="Two tone headings"&gt;two tone headings&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../mozilla/shadow_text.html" title="Shadow text"&gt;shadow text&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
		&lt;!--[if lte IE 6]&gt;  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;  &lt;/a&gt;  &lt;![endif]--&gt;
		&lt;/li&gt;
		&lt;li&gt;&lt;a class="hide" href="../ie/index.html"&gt;EXPLORER&lt;/a&gt;
		&lt;!--[if lte IE 6]&gt;  &lt;a href="../ie/index.html"&gt;EXPLORER  &lt;table&gt;&lt;tr&gt;&lt;td&gt;  &lt;![endif]--&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href="../ie/exampleone.html" title="Example one"&gt;example one&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../ie/weft.html" title="Weft fonts"&gt;weft fonts&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../ie/exampletwo.html" title="Vertical align"&gt;vertical align&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
		&lt;!--[if lte IE 6]&gt;  &lt;/td&gt;&lt;/tr&gt;&lt;/tabl
e&gt;  &lt;/a&gt;  &lt;![endif]--&gt;
		&lt;/li&gt;
		&lt;li&gt;&lt;a class="hide" href="../opacity/index.html"&gt;OPACITY&lt;/a&gt;
		&lt;!--[if lte IE 6]&gt;  &lt;a href="../opacity/index.html"&gt;OPACITY  &lt;table&gt;&lt;tr&gt;&lt;td&gt;  &lt;![endif]--&gt;
		&lt;ul&gt;
			&lt;li&gt;&lt;a href="../opacity/colours.html" title="colour wheel"&gt;opaque colours&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../opacity/picturemenu.html" title="a menu using opacity"&gt;opaque menu&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../opacity/png.html" title="partial opacity"&gt;partial opacity&lt;/a&gt;&lt;/li&gt;
			&lt;li&gt;&lt;a href="../opacity/png2.html" title="partial opacity II"&gt;partial opacity II&lt;/a&gt;&lt;/li&gt;
		&lt;/ul&gt;
		&lt;!--[if lte IE 6]&gt;  &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;  &lt;/a&gt;  &lt;![endif]--&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
	&lt;!-- clear the floats if required --&gt;
	&lt;div class="clear"&gt;
		?
	&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

100

101

102

103

104

105

106

107

108

109

110

111

112

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

<head>

<title>二级dropdown弹出菜单--A CROSS BROWSER DROP DOWN CASCADING VALIDATING MENU</title>

/* common styling */

/* set up the overall width of the menu div, the font and the margins */

.menu { font-family: arial, sans-serif; width:750px; margin:0; margin:50px 0; }

/* remove the bullets and set the margin and padding to zero for the unordered list */

.menu ul { padding:0; margin:0; list-style-type: none; } /* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */ .menu ul li { float:left; position:relative; } /* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */ .menu ul li a, .menu ul li a:visited { display:block; text-align:center; text-decoration:none; width:104px; height:30px; color:#000; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; line-height:30px; font-size:11px; } /* make the dropdown ul invisible */ .menu ul li ul { display: none; } /* specific to non IE browsers */ /* set the background and foreground color of the main menu li on hover */ .menu ul li:hover a { color:#fff; background:#b3ab79; } /* make the sub menu ul visible and position it beneath the main menu list item */ .menu ul li:hover ul { display:block; position:absolute; top:31px; left:0; width:105px; } /* style the background and foreground color of the submenu links */ .menu ul li:hover ul li a { display:block; background:#faeec7; color:#000; } /* style the background and forground colors of the links on hover */ .menu ul li:hover ul li a:hover { background:#dfc184; color:#000; }

</style>

</head>

<body>

<ul>

<li><a class="hide" href="../menu/index.html">DEMOS</a>

<ul>

<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></li>

<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></li>

<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>

<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

<li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>

<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></li>

<li><a href="../menu/bodies.html" title="fun with background images">fun backgrounds</a></li>

<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>

<li><a href="../menu/em_images.html" title="em size images compared">em sized images</a></li>

</ul>

</li>

<li><a class="hide" href="index.html">MENUS</a>

<ul>

<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>

<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>

<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>

<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>

<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>

<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>

<li><a href="circles.html" title="circular links">circular links</a></li>

</ul>

</li>

<li><a class="hide" href="../layouts/index.html">LAYOUTS</a>

<ul>

<li><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></li>

<li><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></li>

<li><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></li>

<li><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></li>

<li><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width</a></li>

</ul>

</li>

<li><a class="hide" href="../boxes/index.html">BOXES</a>

<ul>

<li><a href="spies.html" title="a coded list of spies">spies menu</a></li>

<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>

<li><a href="expand.html" title="an enlarging unordered list">enlarging list</a></li>

<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>

<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>

<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>

<li><a href="circles.html" title="circular links">circular links</a></li>

</ul>

</li>

<li><a class="hide" href="../mozilla/index.html">MOZILLA</a>

<ul>

<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>

<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>

<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>

<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></li>

<li><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue</a></li>

<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>

<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>

<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>

</ul>

</li>

<li><a class="hide" href="../ie/index.html">EXPLORER</a>

<ul>

<li><a href="../ie/exampleone.html" title="Example one">example one</a></li>

<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>

<li><a href="../ie/exampletwo.html" title="Vertical align">vertical align</a></li>

</ul>

<!--[if lte IE 6]> </td></tr></tabl

e> </a> <![endif]-->

</li>

<li><a class="hide" href="../opacity/index.html">OPACITY</a>

<ul>

<li><a href="../opacity/colours.html" title="colour wheel">opaque colours</a></li>

<li><a href="../opacity/picturemenu.html" title="a menu using opacity">opaque menu</a></li>

<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>

<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>

</ul>

</li>

</ul>

</div>

</body>

</html>