CSS三级的多级菜单代码
完全 CSS实现的多级菜单代码，可惜在不能在IE8以下版本浏览器中运行，也希望高手可修改完善一下，在火狐或Chrome中倒是没什么大问题。笔者感觉，ie6还能活多少天啊！~？
当前位置：编程学习 > JS >>
答案：<!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=gb2312" />
<title>CSS三级多级菜单</title>
<style type="text/css">
body { background:#FFF; }
/* header-nav */
.header-nav-bg { background:#CC0066 url() repeat-x center; height:40px; }
.header-nav { background:#CC0066 url() repeat-x center; margin:0 auto; width:960px; height:40px; }
.header-nav-menu { float:left; width:620px; height:40px; }
.header-nav-search { float:left; width:300px; height:30px; padding:5px 10px 5px 30px; }
/* nav-menu */
#nav-menu {
z-index:500;
padding:0;
margin:0;
height:40px;
list-style-type:none;
list-style-image:none;
line-height:40px;
width:620px;
font-size:12px;
}
#nav-menu li.top-menu {
display:block;
float:left;
height:40px;
}
#nav-menu li.line {
float:left;
width:10px;
height:40px;
line-height:40px;
background:url() no-repeat 4px 0;
}
#nav-menu li a.main-menu {
padding:0;
line-height:40px;
display:block;
float:left;
height:40px;
cursor:pointer;
font-weight:bold;
text-decoration:none;
color:#fff;
}
#nav-menu li a.main-menu span {
width:80px;
display:block;
text-align:center;
float:left;
height:40px;
}
#nav-menu li a.main-menu span.down {
padding:0;
width:80px;
display: block;
text-align:center;
float:left;
height:40px;
letter-spacing:1px;
}
#nav-menu li:hover a.main-menu { color:#FFC; }
#nav-menu li:hover a.main-menu span { color:#FFC; }
#nav-menu li:hover a.main-menu span.down { color:#FFC; }
#nav-menu li:hover {
z-index:200;
position:relative;
color:#FFC;
}
#nav-menu li:hover ul.sub-menu {
z-index:270;
padding:0px;
width:90px;
height:25px;
top:40px;
left:-5px;
white-space:nowrap;
}
#nav-menu li:hover ul.sub-menu li {
position:relative;
width:90px;
display:block;
float:left;
height:25px;
font-weight:normal;
background:#9999CC;
border:#FFF 1px solid;
border-top:none;
color:#660066;
}
#nav-menu li:hover ul.sub-menu li a {
border:0px;
line-height:25px;
width:90px;
height:25px;
color:#fff;
display:block;
text-decoration:none;
}
#nav-menu li ul.sub-menu li a.fly-menu { background:#9999CC; }
#nav-menu li:hover ul.sub-menu li a:hover {
background:#660066;
color:#fff;
}
#nav-menu li:hover ul.sub-menu li a.fly-menu:hover {
background:#660066;
color:#fff;
}
#nav-menu li:hover li:hover ul {
z-index:400;
border-bottom:none;
padding:0px;
width:120px;
white-space:nowrap;
height:auto;
top:0px;
left:90px;
}
#nav-menu ul {
position:absolute;
padding:0px;
list-style-type: none;
list-style-image: none;
margin:0px;
width:0px;
height:0px;
top:-9999px;
left:-9999px;
}
#nav-menu li:hover ul ul {
position: absolute;
padding:0px;
margin:0px;
list-style-type: none;
list-style-image: none;
width:0px;
height:0px;
top:-9999px;
left:-9999px;
}
#nav-menu li:hover li:hover ul ul {
position: absolute;
padding:0px;
margin:0px;
list-style-type: none;
list-style-image: none;
width:0px;
height:0px;
top:-9999px;
left:-9999px;
}
#nav-menu li:hover li:hover a.fly-menu {
background:#999999;
color:#fff;
}
#nav-menu li:hover li:hover li a.fly-menu {
background:#FC0;
color:#fff;
}
#nav-menu li:hover li:hover li,#nav-menu li:hover li:hover li a{
background:#C5C5C5;
color:#660066;
width:100px;
}
#nav-menu li:hover li:hover li:hover,#nav-menu li:hover li:hover li:hover a {
background:#660066;
color:#FFF;
width:100px;
}
</style>
</head>
<body>
<!--header-->
<div class="header">
<div class="header-nav-bg">
<div class="header-nav">
<div class="header-nav-menu">
<!-- nav-menu -->
<ul id="nav-menu">
<li class="top-menu"><a class="main-menu" href="#"><span>首页</span></a></li>
<li class="line"></li>
<li class="top-menu"><a class="main-menu" href="#"><span class="down">关于卡宝奇</span></a>
<ul class="sub-menu">
<li><a href="#">品牌简介</a></li>
<li><a href="#">品牌文化</a></li>
<li><a href="#">品牌故事</a></li>
<li><a href="#">品牌理念</a></li>
</ul>
</li>
<li class="line"></li>
<li class="top-menu"><a class="main-menu" href="#"><span class="down">体验店</span></a>
</li>
<li class="line"></li>
<li class="top-menu"><a class="main-menu" href="#"><span class="down">个性定制</span></a></li>
<li class="line"></li>
<li class="top-menu"><a class="main-menu" href="#"><span class="down">产品系列</span></a>
<ul class="sub-menu">
<li><a class="fly-menu" href="#">欧美风情</a>
<ul>
<li><a href="#">精美耳饰</a></li>
<li><a href="#">精美项链</a></li>
<li><a href="#">精美手链</a></li>
<li><a href="#">精美男士珠宝</a></li>
<li><a href="#">精美礼品</a></li>
<li><a href="#">钻石饰品</a></li>
<li><a href="#">男性首饰</a></li>
<li><a href="#">女性首饰</a></li>
</ul>
</li>
<li><a class="fly-menu" href="#">时尚浪漫</a>
<ul>
<li class="sub-menu-li"><a href="#">结婚饰品</a></li>
<li><a href="#">精美项链</a></li>
<li><a href="#">精美手链</a></li>
<li><a href="#">精美男士珠宝</a></li>
<li><a href="#">精美礼品</a></li>
<li><a href="#">钻石饰品</a></li>
<li><a href="#">男性首饰</a></li>
<li><a href="#">女性首饰</a></li>
<li><a href="#">儿童首饰</a></li>
<li><a href="#">年轻人首饰</a></l上一个：纯CSS多级半透明菜单
下一个：顶部向右伸缩的导航区域
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。
- JS怎样操作PHP中的参数
- js 怎么在一打开页面就加载这个函数。
- Date.parse()的问题(js)
- <script src="/{maxcms:sitepath}js/common.js"></script>是什么意思