用CSS實現下拉菜單的多種方法_經驗交流

來源：懂視網責編：小采時間：2020-11-27 18:54:44

用CSS實現下拉菜單的多種方法_經驗交流

用CSS實現下拉菜單的多種方法_經驗交流:橫向下拉菜單橫向下拉菜單 0 : ) + sfhover; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0 : ) + sfhover; } sfEls[i].onMouseUp=functi

推薦度：

點擊下載本文 文檔為doc格式

導讀用CSS實現下拉菜單的多種方法_經驗交流:橫向下拉菜單橫向下拉菜單 0 : ) + sfhover; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0 : ) + sfhover; } sfEls[i].onMouseUp=functi

橫向下拉菜單

<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> 
<script type=text/javascript>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> 
 
<li>菜單一 
 
<li>菜單一</li> 
<li>菜單一</li> 
<li>菜單一</li> 
<li>菜單一</li> 
<li>菜單一</li> 
<li>菜單一</li> 
 
</li> 
<li>菜單二 
 
<li>菜單二</li> 
<li>菜單二</li> 
<li>菜單二</li> 
<li>菜單二</li> 
<li>菜單二</li> 
 
</li> 
<li>菜單三 
 
<li>菜單三</li> 
<li>菜單三</li> 
<li>菜單三</li> 
<li>菜單三</li> 
<li>菜單三</li> 
 
</li> 
<li>菜單四 
 
<li>菜單四</li> 
<li>菜單四</li> 
<li>菜單四</li> 
<li>菜單四</li> 
<li>菜單四</li> 
 
</li> 
<li>菜單五 
 
<li>菜單五</li> 
<li>菜單五</li> 
<li>菜單五</li> 
<li>菜單五</li> 
<li>菜單五</li> 
 
</li> 
<li>菜單六 
 
<li>菜單六</li> 
<li>菜單六</li> 
<li>菜單六</li> 
<li>菜單六</li> 
<li>菜單六</li> 
 
</li> 
 
 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
CSS下拉導航菜單效果

<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> 
<script type=text/javascript> 
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> 
 
<li>產品介紹 
 
<li>產品一</li> 
<li>產品一</li> 
<li>產品一</li> 
<li>產品一</li> 
<li>產品一</li> 
<li>產品一</li> 
 
</li> 
<li>服務介紹 
 
<li>服務二</li> 
<li>服務二</li> 
<li>服務二</li> 
<li>服務二服務二</li> 
<li>服務二服務二服務二</li> 
<li>服務二</li> 
 
</li> 
<li>成功案例 
 
<li>案例三</li> 
<li>案例</li> 
<li>案例三案例三</li> 
<li>案例三案例三案例三</li> 
 
</li> 
<li>關于我們 
 
<li>我們四</li> 
<li>我們四</li> 
<li>我們四</li> 
<li>我們四111</li> 
 
</li> 
<li>在線演示 
 
<li>演示</li> 
<li>演示</li> 
<li>演示</li> 
<li>演示演示演示</li> 
<li>演示演示演示</li> 
<li>演示演示</li> 
<li>演示演示演示</li> 
<li>演示演示演示演示演示</li> 
 
</li> 
<li>聯系我們 
 
<li>聯系聯系聯系聯系聯系</li> 
<li>聯系聯系聯系</li> 
<li>聯系</li> 
<li>聯系聯系</li> 
<li>聯系聯系</li> 
<li>聯系聯系聯系</li> 
<li>聯系聯系聯系</li> 
 
</li> 
 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
CSS水平下拉菜單

<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> 
<script type="text/JavaScript"> 
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> 
<h2>CSS Menu - Horizontal</h2> 
<hr /> 
 
<li>Blog</li> 
<li>Work + 
 
<li>Websites + 
 
<li>qrayg</li> 
<li>qArcade</li> 
<li>qLoM</li> 
<li>qDT</li> 
 
</li> 
<li>Pen and Ink</li> 
<li>Free Interfaces</li> 
 
</li> 
<li>Learn + 
 
<li>Fireworks + 
 
<li>aquaButton</li> 
<li>aquaButton2</li> 
<li>waterDrop</li> 
<li>lightFX</li> 
<li>lightFX2</li> 
 
</li> 
<li>CSS + 
 
<li>footerStick</li> 
<li>spriteNav</li> 
<li>@import</li> 
 
</li> 
 
</li> 
<li>Info</li> 
<li>Contact</li> 
 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
CSS垂直下拉菜單

<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> 
<script type="text/javascript"> 
 
</ script> 
</head> 
<body> 
<h2>CSS Menu - Vertical</h2> 
<hr /> 
 
<li>Blog</li> 
<li>Work + 
 
<li>Websites + 
 
<li>qrayg</li> 
<li>qArcade</li> 
<li>qLoM</li> 
<li>qDT</li> 
 
</li> 
<li>Pen and Ink</li> 
<li>Free Interfaces</li> 
 
</li> 
<li>Learn + 
 
<li>Fireworks + 
 
<li>aquaButton</li> 
<li>aquaButton2</li> 
<li>waterDrop</li> 
<li>lightFX</li> 
<li>lightFX2</li> 
 
</li> 
<li>CSS + 
 
<li>footerStick</li> 
<li>spriteNav</li> 
<li>@import</li> 
 
</li> 
 
</li> 
<li>Info</li> 
<li>Contact</li> 
 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
CSS實現的中英文雙語導航菜單

<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="http://m.alabama37th.com/"/> 
<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> 
 
</head> 
<body> 
 
 
<li>Home首　頁</li> 
<li>Blog日志</li> 
<li>guestbook留言本</li> 
<li>Pickbar精品吧</li> 
<li>fansir樊SIR</li> 
 
 
</body> 
</html>

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

用CSS實現下拉菜單的多種方法_經驗交流

推薦度：

點擊下載本文 文檔為doc格式

標簽：分享下拉菜單經驗

熱門焦點

用CSS實現下拉菜單的多種方法_經驗交流

用CSS實現下拉菜單的多種方法_經驗交流

用CSS實現下拉菜單的多種方法_經驗交流

最新推薦

猜你喜歡

熱門推薦