css自动下拉菜单多种实现代码
推荐:css下拉菜单一、横向下拉菜单
二、css下拉导航菜单效果
三、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">
<!--
@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;
}
ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 500px;
list-style: none;
height: 24px;
}
ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left;
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;
display: block !important;
display: inline;
}
ul#navmenu a {
border: 1px solid #fff;
border-right-color: #ccc;
border-bottom-color: #ccc;
padding: 0 6px;
float: none !important;
float: left;
display: block;
background: #eee;
color: #666;
font: bold 10px/22px verdana, arial, helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%;
}
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #ccc;
color: #fff;
}
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #eee;
color: #666;
}
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;
}
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #eee;
color: #666;
}
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;
}
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #eee;
color: #666;
}
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;
}
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.getelementbyidx("navmenu").getelementsbytagname_r("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(" iehoverb"), "");
}
}
}
if (window.attachevent) window.attachevent("onload", navhover);
</script>
</head>
<body>
<h1>css menu - horizontal</h1>
<hr />
<ul id="navmenu">
<li><a href="#">blog</a></li>
<li><a href="#">work +</a>
<ul>
<li><a href="#">websites +</a>
<ul>
<li><a href="#">qrayg</a></li>
<li><a href="#">qarcade</a></li>
<li><a href="#">qlom</a></li>
<li><a href="#">qdt</a></li>
</ul>
</li>
<li><a href="#">pen and ink</a></li>
<li><a href="#">free interfaces</a></li>
</ul>
</li>
<li><a href="#">learn +</a>
<ul>
<li><a href="#"><a href="http://www.jb200.com/list/list_10_1.htm" target="_blank"><font color=red>fireworks</font></a> +</a>
<ul>
<li><a href="#">aquabutton</a></li>
<li><a href="#">aquabutton2</a></li>
<li><a href="#">waterdrop</a></li>
<li><a href="#">lightfx</a></li>
<li><a href="#">lightfx2</a></li>
</ul>
</li>
<li><a href="#">css +</a>
<ul>
<li><a href="#">footerstick</a></li>
<li><a href="#">spritenav</a></li>
<li><a href="#">@import</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">info</a></li>
<li><a href="#">contact</a></li>
</ul>
</body>
</html>
四、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;
}
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
}
ul#navmenu li {
display: block !important;
display: inline;
position: relative;
}
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%;
}
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #ccc;
color: #fff;
}
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
background: #eee;
color: #666;
}
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;
}
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #eee;
color: #666;
}
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;
}
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #eee;
color: #666;
}
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;
}
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.getelementbyidx("navmenu").getelementsbytagname_r("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(" iehoverb"), "");
}
}
}
if (window.attachevent) window.attachevent("onload", navhover);
-->
</script>
</head>
<body>
<h1>css menu - vertical</h1>
<hr />
<ul id="navmenu">
<li><a href="#">blog</a></li>
<li><a href="#">work +</a>
<ul>
<li><a href="#">websites +</a>
<ul>
<li><a href="#">qrayg</a></li>
<li><a href="#">qarcade</a></li>
<li><a href="#">qlom</a></li>
<li><a href="#">qdt</a></li>
</ul>
</li>
<li><a href="#">pen and ink</a></li>
<li><a href="#">free interfaces</a></li>
</ul>
</li>
<li><a href="#">learn +</a>
<ul>
<li><a href="#"><a href="http://www.jb200.com/list/list_10_1.htm" target="_blank"><font color=red>fireworks</font></a> +</a>
<ul>
<li><a href="#">aquabutton</a></li>
<li><a href="#">aquabutton2</a></li>
<li><a href="#">waterdrop</a></li>
<li><a href="#">lightfx</a></li>
<li><a href="#">lightfx2</a></li>
</ul>
</li>
<li><a href="#">css +</a>
<ul>
<li><a href="#">footerstick</a></li>
<li><a href="#">spritenav</a></li>
<li><a href="#">@import</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">info</a></li>
<li><a href="#">contact</a></li>
</ul>
</body>
</html>
五、css实现的中英文双语导航菜单