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

最新推荐文章于 2022-02-06 10:31:34 发布

转载最新推荐文章于 2022-02-06 10:31:34 发布 · 1.7k 阅读

文章标签：

#css #menu #function #xhtml #border #html

css+div 专栏收录该内容

1 篇文章

订阅专栏

本文提供了多个使用纯CSS实现的导航菜单实例，包括横向下拉菜单、水平和垂直下拉菜单等，展示了不同样式的菜单效果及其对应的HTML和CSS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导读

横向下拉菜单

<!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>
<script type=text/javascript><![CDATA[//><!]]></script>
</head>
<body>
<ul id="nav">
<li><a href="#" _fcksavedurl="#">菜单一</a>
<ul>
<li><a href="#" _fcksavedurl="#">菜单一</a></li>
<li><a href="#" _fcksavedurl="#">菜单一</a></li>
<li><a href="#" _fcksavedurl="#">菜单一</a></li>
<li><a href="#" _fcksavedurl="#">菜单一</a></li>
<li><a href="#" _fcksavedurl="#">菜单一</a></li>
<li><a href="#" _fcksavedurl="#">菜单一</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">菜单二</a>
<ul>
<li><a href="#" _fcksavedurl="#">菜单二</a></li>
<li><a href="#" _fcksavedurl="#">菜单二</a></li>
<li><a href="#" _fcksavedurl="#">菜单二</a></li>
<li><a href="#" _fcksavedurl="#">菜单二</a></li>
<li><a href="#" _fcksavedurl="#">菜单二</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">菜单三</a>
<ul>
<li><a href="#" _fcksavedurl="#">菜单三</a></li>
<li><a href="#" _fcksavedurl="#">菜单三</a></li>
<li><a href="#" _fcksavedurl="#">菜单三</a></li>
<li><a href="#" _fcksavedurl="#">菜单三</a></li>
<li><a href="#" _fcksavedurl="#">菜单三</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">菜单四</a>
<ul>
<li><a href="#" _fcksavedurl="#">菜单四</a></li>
<li><a href="#" _fcksavedurl="#">菜单四</a></li>
<li><a href="#" _fcksavedurl="#">菜单四</a></li>
<li><a href="#" _fcksavedurl="#">菜单四</a></li>
<li><a href="#" _fcksavedurl="#">菜单四</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">菜单五</a>
<ul>
<li><a href="#" _fcksavedurl="#">菜单五</a></li>
<li><a href="#" _fcksavedurl="#">菜单五</a></li>
<li><a href="#" _fcksavedurl="#">菜单五</a></li>
<li><a href="#" _fcksavedurl="#">菜单五</a></li>
<li><a href="#" _fcksavedurl="#">菜单五</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">菜单六</a>
<ul>
<li><a href="#" _fcksavedurl="#">菜单六</a></li>
<li><a href="#" _fcksavedurl="#">菜单六</a></li>
<li><a href="#" _fcksavedurl="#">菜单六</a></li>
<li><a href="#" _fcksavedurl="#">菜单六</a></li>
<li><a href="#" _fcksavedurl="#">菜单六</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>

[Ctrl+A 全选提示:将代码保存为网页，再运行]

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>
<script type=text/javascript> 
<![CDATA[//><!]]> 
</script>
</head>
<body>
<ul id="nav">
<li><a href="#" _fcksavedurl="#">产品介绍</a>
<ul>
<li><a href="#" _fcksavedurl="#">产品一</a></li>
<li><a href="#" _fcksavedurl="#">产品一</a></li>
<li><a href="#" _fcksavedurl="#">产品一</a></li>
<li><a href="#" _fcksavedurl="#">产品一</a></li>
<li><a href="#" _fcksavedurl="#">产品一</a></li>
<li><a href="#" _fcksavedurl="#">产品一</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">服务介绍</a>
<ul>
<li><a href="#" _fcksavedurl="#">服务二</a></li>
<li><a href="#" _fcksavedurl="#">服务二</a></li>
<li><a href="#" _fcksavedurl="#">服务二</a></li>
<li><a href="#" _fcksavedurl="#">服务二服务二</a></li>
<li><a href="#" _fcksavedurl="#">服务二服务二服务二</a></li>
<li><a href="#" _fcksavedurl="#">服务二</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">成功案例</a>
<ul>
<li><a href="#" _fcksavedurl="#">案例三</a></li>
<li><a href="#" _fcksavedurl="#">案例</a></li>
<li><a href="#" _fcksavedurl="#">案例三案例三</a></li>
<li><a href="#" _fcksavedurl="#">案例三案例三案例三</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">关于我们</a>
<ul>
<li><a href="#" _fcksavedurl="#">我们四</a></li>
<li><a href="#" _fcksavedurl="#">我们四</a></li>
<li><a href="#" _fcksavedurl="#">我们四</a></li>
<li><a href="#" _fcksavedurl="#">我们四111</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">在线演示</a>
<ul>
<li><a href="#" _fcksavedurl="#">演示</a></li>
<li><a href="#" _fcksavedurl="#">演示</a></li>
<li><a href="#" _fcksavedurl="#">演示</a></li>
<li><a href="#" _fcksavedurl="#">演示演示演示</a></li>
<li><a href="#" _fcksavedurl="#">演示演示演示</a></li>
<li><a href="#" _fcksavedurl="#">演示演示</a></li>
<li><a href="#" _fcksavedurl="#">演示演示演示</a></li>
<li><a href="#" _fcksavedurl="#">演示演示演示演示演示</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">联系我们</a>
<ul>
<li><a href="#" _fcksavedurl="#">联系联系联系联系联系</a></li>
<li><a href="#" _fcksavedurl="#">联系联系联系</a></li>
<li><a href="#" _fcksavedurl="#">联系</a></li>
<li><a href="#" _fcksavedurl="#">联系联系</a></li>
<li><a href="#" _fcksavedurl="#">联系联系</a></li>
<li><a href="#" _fcksavedurl="#">联系联系联系</a></li>
<li><a href="#" _fcksavedurl="#">联系联系联系</a></li>
</ul>
</li>
</ul>
</body>
</html>

[Ctrl+A 全选提示:将代码保存为网页，再运行]

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>
<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>
<h1>CSS Menu - Horizontal</h1>
<hr />
<ul id="navmenu">
<li><a href="#" _fcksavedurl="#">Blog</a></li>
<li><a href="#" _fcksavedurl="#">Work +</a>
<ul>
<li><a href="#" _fcksavedurl="#">Websites +</a>
<ul>
<li><a href="#" _fcksavedurl="#">qrayg</a></li>
<li><a href="#" _fcksavedurl="#">qArcade</a></li>
<li><a href="#" _fcksavedurl="#">qLoM</a></li>
<li><a href="#" _fcksavedurl="#">qDT</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">Pen and Ink</a></li>
<li><a href="#" _fcksavedurl="#">Free Interfaces</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">Learn +</a>
<ul>
<li><a href="#" _fcksavedurl="#"><a href="http://www.jb51.net/list/list_10_1.htm" _fcksavedurl="http://www.jb51.net/list/list_10_1.htm" target="_blank"><font color=red>Fireworks</font></a> +</a>
<ul>
<li><a href="#" _fcksavedurl="#">aquaButton</a></li>
<li><a href="#" _fcksavedurl="#">aquaButton2</a></li>
<li><a href="#" _fcksavedurl="#">waterDrop</a></li>
<li><a href="#" _fcksavedurl="#">lightFX</a></li>
<li><a href="#" _fcksavedurl="#">lightFX2</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">CSS +</a>
<ul>
<li><a href="#" _fcksavedurl="#">footerStick</a></li>
<li><a href="#" _fcksavedurl="#">spriteNav</a></li>
<li><a href="#" _fcksavedurl="#">@import</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">Info</a></li>
<li><a href="#" _fcksavedurl="#">Contact</a></li>
</ul>
</body>
</html>

[Ctrl+A 全选提示:将代码保存为网页，再运行]

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>
<script type="text/javascript"> 
 
</script>
</head>
<body>
<h1>CSS Menu - Vertical</h1>
<hr />
<ul id="navmenu">
<li><a href="#" _fcksavedurl="#">Blog</a></li>
<li><a href="#" _fcksavedurl="#">Work +</a>
<ul>
<li><a href="#" _fcksavedurl="#">Websites +</a>
<ul>
<li><a href="#" _fcksavedurl="#">qrayg</a></li>
<li><a href="#" _fcksavedurl="#">qArcade</a></li>
<li><a href="#" _fcksavedurl="#">qLoM</a></li>
<li><a href="#" _fcksavedurl="#">qDT</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">Pen and Ink</a></li>
<li><a href="#" _fcksavedurl="#">Free Interfaces</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">Learn +</a>
<ul>
<li><a href="#" _fcksavedurl="#"><a href="http://www.jb51.net/list/list_10_1.htm" _fcksavedurl="http://www.jb51.net/list/list_10_1.htm" target="_blank"><font color=red>Fireworks</font></a> +</a>
<ul>
<li><a href="#" _fcksavedurl="#">aquaButton</a></li>
<li><a href="#" _fcksavedurl="#">aquaButton2</a></li>
<li><a href="#" _fcksavedurl="#">waterDrop</a></li>
<li><a href="#" _fcksavedurl="#">lightFX</a></li>
<li><a href="#" _fcksavedurl="#">lightFX2</a></li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">CSS +</a>
<ul>
<li><a href="#" _fcksavedurl="#">footerStick</a></li>
<li><a href="#" _fcksavedurl="#">spriteNav</a></li>
<li><a href="#" _fcksavedurl="#">@import</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" _fcksavedurl="#">Info</a></li>
<li><a href="#" _fcksavedurl="#">Contact</a></li>
</ul>
</body>
</html>

[Ctrl+A 全选提示:将代码保存为网页，再运行]

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/" _fcksavedurl="Http://www.junstudio.org/">Home<span>首　页</span></a></li>
<li><a class="bi" href="Http://www.junstudio.org/blog" _fcksavedurl="Http://www.junstudio.org/blog">Blog<span>日志</span></a></li>
<li><a class="bi" href="Http://www.junstudio.org/guestbook" _fcksavedurl="Http://www.junstudio.org/guestbook">guestbook<span>留言本</span></a></li>
<li><a class="bi" href="Http://www.pickbar.com/" _fcksavedurl="Http://www.pickbar.com/">Pickbar<span>精品吧</span></a></li>
<li><a class="bi" href="Http://www.fansir.com/" _fcksavedurl="Http://www.fansir.com/">fansir<span>樊SIR</span></a></li>
</ul>
<div id="navbar"></div>
</body>
</html>

[Ctrl+A 全选提示:将代码保存为网页，再运行]

转载自: http://www.jb51.net/article/5959.htm