用CSS实现下拉菜单的多种方法

横向下拉菜单

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="zh-CN" /> 
<title>横向下拉菜单</title> 
<style type="text/css"> 
 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3Dtext%2Fjavascript%3E%3C!--%2F%2F--%3E%3C!%5BCDATA%5B%2F%2F%3E%3C!--%20%0D%0Afunction%20menuFix()%20%7B%20%0D%0Avar%20sfEls%20%3D%20document.getElementById(%22nav%22).getElementsByTagName(%22li%22)%3B%20%0D%0Afor%20(var%20i%3D0%3B%20i%3CsfEls.length%3B%20i%2B%2B)%20%7B%20%0D%0AsfEls%5Bi%5D.onmouseover%3Dfunction()%20%7B%20%0D%0Athis.className%2B%3D(this.className.length%3E0%3F%20%22%20%22%3A%20%22%22)%20%2B%20%22sfhover%22%3B%20%0D%0A%7D%20%0D%0AsfEls%5Bi%5D.onMouseDown%3Dfunction()%20%7B%20%0D%0Athis.className%2B%3D(this.className.length%3E0%3F%20%22%20%22%3A%20%22%22)%20%2B%20%22sfhover%22%3B%20%0D%0A%7D%20%0D%0AsfEls%5Bi%5D.onMouseUp%3Dfunction()%20%7B%20%0D%0Athis.className%2B%3D(this.className.length%3E0%3F%20%22%20%22%3A%20%22%22)%20%2B%20%22sfhover%22%3B%20%0D%0A%7D%20%0D%0AsfEls%5Bi%5D.onmouseout%3Dfunction()%20%7B%20%0D%0Athis.className%3Dthis.className.replace(new%20RegExp(%22(%20%3F%7C%5E)sfhover%5C%5Cb%22)%2C%20%0D%0A%22%22)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Awindow.onload%3DmenuFix%3B%20%0D%0A%2F%2F--%3E%3C!%5D%5D%3E%3C%2Fscript%3E"> 
</head> 
<body> 
<ul id="nav"> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单一</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单一</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单一</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单一</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单一</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单一</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单一</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单二</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单二</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单二</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单二</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单二</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单二</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单三</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单三</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单三</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单三</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单三</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单三</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单四</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单四</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单四</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单四</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单四</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单四</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单五</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单五</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单五</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单五</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单五</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单五</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单六</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单六</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单六</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单六</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单六</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">菜单六</a></li> 
</ul> 
</li> 
</ul> 
</div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　CSS下拉导航菜单效果

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS下拉菜单演示</title> 
<style type="text/css"> 
 
</style> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3Dtext%2Fjavascript%3E%20%0D%0A%3C!--%2F%2F--%3E%3C!%5BCDATA%5B%2F%2F%3E%3C!--%20%0D%0Afunction%20menuFix()%20%7B%20%0D%0Avar%20sfEls%20%3D%20document.getElementById(%22nav%22).getElementsByTagName(%22li%22)%3B%20%0D%0Afor%20(var%20i%3D0%3B%20i%3CsfEls.length%3B%20i%2B%2B)%20%7B%20%0D%0AsfEls%5Bi%5D.onmouseover%3Dfunction()%20%7B%20%0D%0Athis.className%2B%3D(this.className.length%3E0%3F%20%22%20%22%3A%20%22%22)%20%2B%20%22sfhover%22%3B%20%0D%0A%7D%20%0D%0AsfEls%5Bi%5D.onMouseDown%3Dfunction()%20%7B%20%0D%0Athis.className%2B%3D(this.className.length%3E0%3F%20%22%20%22%3A%20%22%22)%20%2B%20%22sfhover%22%3B%20%0D%0A%7D%20%0D%0AsfEls%5Bi%5D.onMouseUp%3Dfunction()%20%7B%20%0D%0Athis.className%2B%3D(this.className.length%3E0%3F%20%22%20%22%3A%20%22%22)%20%2B%20%22sfhover%22%3B%20%0D%0A%7D%20%0D%0AsfEls%5Bi%5D.onmouseout%3Dfunction()%20%7B%20%0D%0Athis.className%3Dthis.className.replace(new%20RegExp(%22(%20%3F%7C%5E)sfhover%5C%5Cb%22)%2C%20%0D%0A%22%22)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Awindow.onload%3DmenuFix%3B%20%0D%0A%2F%2F--%3E%3C!%5D%5D%3E%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<ul id="nav"> 
<li><a href="#" _ewebeditor_ta_href="%23">产品介绍</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">产品一</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">产品一</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">产品一</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">产品一</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">产品一</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">产品一</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">服务介绍</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">服务二</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">服务二</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">服务二</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">服务二服务二</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">服务二服务二服务二</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">服务二</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">成功案例</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">案例三</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">案例</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">案例三案例三</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">案例三案例三案例三</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">关于我们</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">我们四</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">我们四</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">我们四</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">我们四111</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">在线演示</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">演示</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">演示</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">演示</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">演示演示演示</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">演示演示演示</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">演示演示</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">演示演示演示</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">演示演示演示演示演示</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">联系我们</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">联系联系联系联系联系</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">联系联系联系</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">联系</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">联系联系</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">联系联系</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">联系联系联系</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">联系联系联系</a></li> 
</ul> 
</li> 
</ul> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　CSS水平下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>CSS Menu - Horizontal</title> 
<style type="text/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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2FJavaScript%22%3E%20%0D%0AnavHover%20%3D%20function()%20%7B%20%0D%0Avar%20lis%20%3D%20document.getElementById(%22navmenu%22).getElementsByTagName(%22LI%22)%3B%20%0D%0Afor%20(var%20i%3D0%3B%20i%3Clis.length%3B%20i%2B%2B)%20%7B%20%0D%0Alis%5Bi%5D.onmouseover%3Dfunction()%20%7B%20%0D%0Athis.className%2B%3D%22%20iehover%22%3B%20%0D%0A%7D%20%0D%0Alis%5Bi%5D.onmouseout%3Dfunction()%20%7B%20%0D%0Athis.className%3Dthis.className.replace(new%20RegExp(%22%20iehover%5C%5Cb%22)%2C%20%22%22)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aif%20(window.attachEvent)%20window.attachEvent(%22onload%22%2C%20navHover)%3B%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<h1>CSS Menu - Horizontal</h1> 
<hr /> 
<ul id="navmenu"> 
<li><a href="#" _ewebeditor_ta_href="%23">Blog</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">Work +</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">Websites +</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">qrayg</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">qArcade</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">qLoM</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">qDT</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">Pen and Ink</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">Free Interfaces</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">Learn +</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">Fireworks +</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">aquaButton</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">aquaButton2</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">waterDrop</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">lightFX</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">lightFX2</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">CSS +</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">footerStick</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">spriteNav</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">@import</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">Info</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">Contact</a></li> 
</ul> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　CSS垂直下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>CSS Menu - Vertical</title> 
<style type="text/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 = 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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%3C!--%20%0D%0AnavHover%20%3D%20function()%20%7B%20%0D%0Avar%20lis%20%3D%20document.getElementById(%22navmenu%22).getElementsByTagName(%22LI%22)%3B%20%0D%0Afor%20(var%20i%3D0%3B%20i%3Clis.length%3B%20i%2B%2B)%20%7B%20%0D%0Alis%5Bi%5D.onmouseover%3Dfunction()%20%7B%20%0D%0Athis.className%2B%3D%22%20iehover%22%3B%20%0D%0A%7D%20%0D%0Alis%5Bi%5D.onmouseout%3Dfunction()%20%7B%20%0D%0Athis.className%3Dthis.className.replace(new%20RegExp(%22%20iehover%5C%5Cb%22)%2C%20%22%22)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aif%20(window.attachEvent)%20window.attachEvent(%22onload%22%2C%20navHover)%3B%20%0D%0A--%3E%20%0D%0A%3C%2Fscript%3E"> 
</head> 
<body> 
<h1>CSS Menu - Vertical</h1> 
<hr /> 
<ul id="navmenu"> 
<li><a href="#" _ewebeditor_ta_href="%23">Blog</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">Work +</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">Websites +</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">qrayg</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">qArcade</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">qLoM</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">qDT</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">Pen and Ink</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">Free Interfaces</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">Learn +</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">Fireworks +</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">aquaButton</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">aquaButton2</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">waterDrop</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">lightFX</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">lightFX2</a></li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">CSS +</a> 
<ul> 
<li><a href="#" _ewebeditor_ta_href="%23">footerStick</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">spriteNav</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">@import</a></li> 
</ul> 
</li> 
</ul> 
</li> 
<li><a href="#" _ewebeditor_ta_href="%23">Info</a></li> 
<li><a href="#" _ewebeditor_ta_href="%23">Contact</a></li> 
</ul> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta name="Keywords" content="bilingual menu,中英文双语菜单" /> 
<meta http-equiv="Description" content="完全用CSS实现的中英文双语导航菜单" /> 
<meta content="all" name="robots" /> 
<meta name="author" content="forestgan" /> 
<meta name="copyright" content="http://www.forest53.com" /> 
<title>完全用CSS实现的中英文双语导航菜单</title> 
<style type="text/css"> 
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; 
} 
</style> 
<link href="../css/main.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="top"> 
<ul id="nav"> 
<li><a class="bi" href="Http://www.junstudio.org/" _ewebeditor_ta_href="Http%3A%2F%2Fwww.junstudio.org%2F">Home<span>首　页</span></a></li> 
<li><a class="bi" href="Http://www.junstudio.org/blog" _ewebeditor_ta_href="Http%3A%2F%2Fwww.junstudio.org%2Fblog">Blog<span>日志</span></a></li> 
<li><a class="bi" href="Http://www.junstudio.org/guestbook" _ewebeditor_ta_href="Http%3A%2F%2Fwww.junstudio.org%2Fguestbook">guestbook<span>留言本</span></a></li> 
<li><a class="bi" href="Http://www.pickbar.com/" _ewebeditor_ta_href="Http%3A%2F%2Fwww.pickbar.com%2F">Pickbar<span>精品吧</span></a></li> 
<li><a class="bi" href="Http://www.fansir.com/" _ewebeditor_ta_href="Http%3A%2F%2Fwww.fansir.com%2F">fansir<span>樊SIR</span></a></li> 
</ul> 
<div id="navbar"></div> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程