纵向二级菜单
2010-07-22 10:25
204 查看
<!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>
<mce:style type="text/css"><!--
body {
margin: 0;
padding: 30px;
background: #FFF;
color: #666;
}
<!-- h1样式 -->
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#machineMenu,
ul#machineMenu li,
ul#machineMenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
height: 30px;
list-style: none;
}
ul#machineMenu li {
display: block !important;
display: inline;
position: relative;
}
ul#machineMenu 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#machineMenu a:hover,
ul#machineMenu li:hover a,
ul#machineMenu li.iehover a {
background: #CCC;
color: #FFF;
}
ul#machineMenu li:hover li a,
ul#machineMenu li.iehover li a {
background: #EEE;
color: #666;
}
ul#machineMenu li:hover li a:hover,
ul#machineMenu li:hover li:hover a,
ul#machineMenu li.iehover li a:hover,
ul#machineMenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
ul#machineMenu li:hover li:hover li a,
ul#machineMenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
ul#machineMenu li:hover li:hover li a:hover,
ul#machineMenu li:hover li:hover li:hover a,
ul#machineMenu li.iehover li.iehover li a:hover,
ul#machineMenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
ul#machineMenu li:hover li:hover li:hover li a,
ul#machineMenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
ul#machineMenu li:hover li:hover li:hover li a:hover,
ul#machineMenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}
ul#machineMenu ul,
ul#machineMenu ul ul,
ul#machineMenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}
ul#machineMenu li:hover ul ul,
ul#machineMenu li:hover ul ul ul,
ul#machineMenu li.iehover ul ul,
ul#machineMenu li.iehover ul ul ul {
display: none;
}
ul#machineMenu li:hover ul,
ul#machineMenu ul li:hover ul,
ul#machineMenu ul ul li:hover ul,
ul#machineMenu li.iehover ul,
ul#machineMenu ul li.iehover ul,
ul#machineMenu ul ul li.iehover ul {
display: block;
}
--></mce:style><style type="text/css" mce_bogus="1">body {
margin: 0;
padding: 30px;
background: #FFF;
color: #666;
}
<!-- h1样式 -->
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#machineMenu,
ul#machineMenu li,
ul#machineMenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
height: 30px;
list-style: none;
}
ul#machineMenu li {
display: block !important;
display: inline;
position: relative;
}
ul#machineMenu 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#machineMenu a:hover,
ul#machineMenu li:hover a,
ul#machineMenu li.iehover a {
background: #CCC;
color: #FFF;
}
ul#machineMenu li:hover li a,
ul#machineMenu li.iehover li a {
background: #EEE;
color: #666;
}
ul#machineMenu li:hover li a:hover,
ul#machineMenu li:hover li:hover a,
ul#machineMenu li.iehover li a:hover,
ul#machineMenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
ul#machineMenu li:hover li:hover li a,
ul#machineMenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
ul#machineMenu li:hover li:hover li a:hover,
ul#machineMenu li:hover li:hover li:hover a,
ul#machineMenu li.iehover li.iehover li a:hover,
ul#machineMenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
ul#machineMenu li:hover li:hover li:hover li a,
ul#machineMenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
ul#machineMenu li:hover li:hover li:hover li a:hover,
ul#machineMenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}
ul#machineMenu ul,
ul#machineMenu ul ul,
ul#machineMenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}
ul#machineMenu li:hover ul ul,
ul#machineMenu li:hover ul ul ul,
ul#machineMenu li.iehover ul ul,
ul#machineMenu li.iehover ul ul ul {
display: none;
}
ul#machineMenu li:hover ul,
ul#machineMenu ul li:hover ul,
ul#machineMenu ul ul li:hover ul,
ul#machineMenu li.iehover ul,
ul#machineMenu ul li.iehover ul,
ul#machineMenu ul ul li.iehover ul {
display: block;
}</style>
<mce:script type="text/javascript"><!--
navHover = function() {
var lis = document.getElementByIdx("machineMenu").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(" iehover//b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", navHover);
// --></mce:script>
</head>
<body>
<h1>CSS Menu - Vertical</h1>
<hr />
<ul id="machineMenu">
<li><a href="#" mce_href="#">Blog</a></li>
<li><a href="#" mce_href="#">Work +</a>
<ul>
<li><a href="#" mce_href="#">Websites +</a>
<ul>
<li><a href="#" mce_href="#">qrayg</a></li>
<li><a href="#" mce_href="#">qArcade</a></li>
<li><a href="#" mce_href="#">qLoM</a></li>
<li><a href="#" mce_href="#">qDT</a></li>
</ul>
</li>
<li><a href="#" mce_href="#">Pen and Ink</a></li>
<li><a href="#" mce_href="#">Free Interfaces</a></li>
</ul>
</li>
<li><a href="#" mce_href="#">Learn +</a>
<ul>
<li><a href="#" mce_href="#"><a href="http://www.jb51.net/list/list_10_1.htm" mce_href="http://www.jb51.net/list/list_10_1.htm" target="_blank"><font color=red>Fireworks</font></a>
<ul>
<li><a href="#" mce_href="#">aquaButton</a></li>
<li><a href="#" mce_href="#">aquaButton2</a></li>
<li><a href="#" mce_href="#">waterDrop</a></li>
<li><a href="#" mce_href="#">lightFX</a></li>
<li><a href="#" mce_href="#">lightFX2</a></li>
</ul>
</li>
<li><a href="#" mce_href="#">CSS +</a>
<ul>
<li><a href="#" mce_href="#">footerStick</a></li>
<li><a href="#" mce_href="#">spriteNav</a></li>
<li><a href="#" mce_href="#">@import</a></li>
</ul>
</li>
</ul></li>
<li><a href="#" mce_href="#">Info</a></li>
<li><a href="#" mce_href="#">Contact</a></li>
</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Web标准：四、纵向导航菜单及二级弹出菜单
- web标准(复习)--4 纵向导航菜单及二级弹出菜单
- 学习二级纵向菜单两步走
- 纯CSS二级纵向菜单
- 十天学会Div+CSS第四天之【纵向导航与二级菜单】
- 纵向导航二级弹出菜单
- 第四天 纵向导航菜单及二级弹出菜单
- 纵向折叠二级菜单
- 纵向导航菜单，点击产生二级菜单
- 纵向折叠二级菜单(无限点击)
- 纵向导航菜单及二级弹出菜单(实践可行)
- 纵向导航菜单及二级弹出菜单
- 纵向导航菜单及二级弹出菜单 样式
- 纵向琴键式二级导航菜单
- 第四天 纵向导航菜单及二级弹出菜单
- 十天学会web标准（DIV+CSS）系列（四）纵向导航菜单及二级弹出菜单
- DIV+CSS制作二级导航菜单(纵向)
- div+css 纵向导航菜单及二级菜单弹出
- 不错的左纵向二级菜单(JS)
- 简单的二级联动菜单