您的位置：网站首页 > 网络营销 > 网站制作 > 纯CSS实现的三级导航菜单效果代码
纯CSS实现的三级导航菜单效果代码
来源： 日期：2015-11-04 20:49:25 人气：标签： 
本文实例讲述了纯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><title>css导航</title>
<meta content="text/html; charset=gb2312" http-equiv=content-type>
<style type="text/css">
<!--
body {
font: 12px/1.6em tahoma,verdana;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 16.8px;
}
#nav {
z-index: 500; padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; padding-right: 0px; height: 27px; list-style-image: none; padding-top: 0px
}
#nav li.top {
display: block; float: left; height: 27px;
}
#nav li a.top_link {
padding-bottom: 0px; line-height: 27px; padding-left: 0px; padding-right: 0px; display: block; float: left; height: 27px; font-size: 12px; cursor: pointer; font-weight: bold; text-decoration: none; padding-top: 0px
}
#nav li a.top_link span {
padding-bottom: 0px; width: 80px; display: block; text-align:center; float: left; height: 27px; padding-top: 0px
}
#nav li a.top_link span.down {
padding-bottom: 0px; width: 80px; display: block; text-align:center; background: url(images/three1.gif) no-repeat right; float: left; height: 27px; padding-top: 0px
}
#nav li:hover a.top_link {
background-color:#548bcf; color:#fff2ee;
}
#nav li:hover a.top_link span {
background-color:#548bcf; color:#fff2ee;
}
#nav li:hover a.top_link span.down {
background-color:#548bcf; color:#fff2ee;background: url(images/three1a.gif) no-repeat right;
}
#nav li:hover {
z-index: 200; position: relative
}
#nav li:hover ul.sub {
z-index: 270; border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 0px; padding-left: 0px; width: 150px; padding-right: 0px; white-space: nowrap; background: #e1ecf6; height: auto; border-top: #ddd 1px solid; top: 27px; border-right: #ddd 1px solid; padding-top: 0px; left: 1px
}
#nav li:hover ul.sub li {
position: relative; width: 150px; display: block; float: left; height: 19px; font-weight: normal
}
#nav li:hover ul.sub li a {
border-bottom: 0px; border-left: 0px; line-height: 19px; text-indent: 5px; width: 150px; display: block; height: 19px; color: #000; font-size: 12px; border-top: 0px; border-right: 0px; text-decoration: none
}
#nav li ul.sub li a.fly {
background: url(images/arrow.gif) #e1ecf6 no-repeat left center
}
#nav li:hover ul.sub li a:hover {
background: url(images/subli_bg.gif) #548bcf repeat-x center center; color: #fff;
}
#nav li:hover ul.sub li a.fly:hover {
background: url(images/arrow_over.gif) #548bcf no-repeat left center; color: #fff
}
#nav li:hover li:hover ul {
z-index: 400; border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 0px; padding-left: 0px; width: 150px; padding-right: 0px; white-space: nowrap; background: #e1ecf6; height: auto; border-top: #ddd 1px solid; top: -1px; border-right: #ddd 1px solid; padding-top: 0px; left: 144px
}
#nav li:hover li:hover li:hover ul {
z-index: 400; border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 0px; padding-left: 0px; width: 150px; padding-right: 0px; white-space: nowrap; background: #e1ecf6; height: auto; border-top: #ddd 1px solid; top: -1px; border-right: #ddd 1px solid; padding-top: 0px; left: 144px
}
#nav li:hover li:hover li:hover li:hover ul {
z-index: 400; border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 0px; padding-left: 0px; width: 150px; padding-right: 0px; white-space: nowrap; background: #e1ecf6; height: auto; border-top: #ddd 1px solid; top: -1px; border-right: #ddd 1px solid; padding-top: 0px; left: 144px
}
#nav li:hover li:hover li:hover li:hover li:hover ul {
z-index: 400; border-bottom: #ddd 1px solid; border-left: #ddd 1px solid; padding-bottom: 0px; padding-left: 0px; width: 150px; padding-right: 0px; white-space: nowrap; background: #e1ecf6; height: auto; border-top: #ddd 1px solid; top: -1px; border-right: #ddd 1px solid; padding-top: 0px; left: 144px
}
#nav ul {
position: absolute; padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 0px; padding-right: 0px; height: 0px; top: -9999px; list-style-image: none; padding-top: 0px; left: -9999px
}
#nav li:hover ul ul {
position: absolute; padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 0px; padding-right: 0px; height: 0px; top: -9999px; list-style-image: none; padding-top: 0px; left: -9999px
}
#nav li:hover li:hover ul ul {
position: absolute; padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 0px; padding-right: 0px; height: 0px; top: -9999px; list-style-image: none; padding-top: 0px; left: -9999px
}
#nav li:hover li:hover li:hover ul ul {
position: absolute; padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 0px; padding-right: 0px; height: 0px; top: -9999px; list-style-image: none; padding-top: 0px; left: -9999px
}
#nav li:hover li:hover li:hover li:hover ul ul {
position: absolute; padding-bottom: 0px; list-style-type: none; margin: 0px; padding-left: 0px; width: 0px; padding-right: 0px; height: 0px; top: -9999px; list-style-image: none; padding-top: 0px; left: -9999px
}
#nav li:hover li:hover a.fly {
border-bottom-color: #fff; border-top-color: #fff; background: url(images/arrow_over.gif) #548bcf no-repeat left center; color: #fff; border-right-color: #fff; border-left-color: #fff;
}
#nav li:hover li:hover li:hover a.fly {
border-bottom-color: #fff; border-top-color: #fff; background: url(images/arrow_over.gif) #548bcf no-repeat left center; color: #fff; border-right-color: #fff; border-left-color: #fff;
}
#nav li:hover li:hover li:hover li:hover a.fly {
border-bottom-color: #fff; border-top-color: #fff; background: url(images/arrow_over.gif) #548bcf no-repeat left center; color: #fff; border-right-color: #fff; border-left-color: #fff;
}
#nav li:hover li:hover li:hover li:hover li:hover a.fly {
border-bottom-color: #fff; border-top-color: #fff; background: url(images/arrow_over.gif) #548bcf no-repeat left center; color: #fff; border-right-color: #fff; border-left-color: #fff;
}
#nav li:hover li:hover li a.fly {
border-bottom-color: #e1ecf6; border-top-color: #e1ecf6; background: url(images/arrow.gif) #e1ecf6 no-repeat left center; color: #000; border-right-color: #e1ecf6; border-left-color: #e1ecf6
}
#nav li:hover li:hover li:hover li a.fly {
border-bottom-color: #e1ecf6; border-top-color: #e1ecf6; background: url(images/arrow.gif) #e1ecf6 no-repeat left center; color: #000; border-right-color: #e1ecf6; border-left-color: #e1ecf6
}
#nav li:hover li:hover li:hover li:hover li a.fly {
border-bottom-color: #e1ecf6; border-top-color: #e1ecf6; background: url(images/arrow.gif) #e1ecf6 no-repeat left center; color: #000; border-right-color: #e1ecf6; border-left-color: #e1ecf6
}
-->
</style>
</head>
<body>
<ul id=nav>
<li class=top><a class=top_link
href="#"><span>首页</span></a></li>
<li class=top><a id=products class=top_link
href="#"><span
class=down>关于我们</span></a>
<ul class=sub>
<li><a href="#">公司简介</a></li>
<li><a href="#">董事长&总裁</a></li>
<li><a href="#">发展历程</a></li>
<li><a href="#">公司荣誉</a></li></ul></li>
<li class=top><a id=services class=top_link href="#"><span
class=down>产品&服务</span></a>
<ul class=sub>
<li><a class=fly href="#">产品1</a>
<ul>
<li><a href="#">配套</a></li>
<li><a href="#">配件</a></li></ul></li>
<li><a class=fly href="#">产品2</a>
<ul>
<li><a href="#">产品2-1</a></li>
<li><a href="#">产品2-2</a></li></ul></li>
<li><a class=fly href="#">服务</a>
<ul>
<li><a href="#">服务111</a></li>
<li><a href="#">服务112</a></li>
<li><a href="#">服务113</a></li>
<li><a href="#">服务114</a></li>
<li><a href="#">服务115</a></li></ul></li></ul></li>
<li class=top><a id=contacts class=top_link
href="#"><span class=down>新闻中心</span></a>
<ul class=sub>
<li><a href="#">公告</a></li>
<li><a href="#">行业新闻</a></li></ul></li>
<li class=top><a id=hr class=top_link href="#"><span
class=down>人力资源</span></a>
<ul class=sub>
<li><a href="#">人才战略</a></li>
<li><a href="#">社会招聘</a></li>
<li><a href="#">公司福利</a></li></ul></li>
<li class=top><a id=investors class=top_link
href="#"><span class=down>合作伙伴</span></a>
<ul class=sub>
<li><a href="#">伙伴1</a></li>
<li><a href="#">伙伴2</a></li>
<li><a href="#">伙伴3</a></li></ul></li>
<li class=top><a id=privacy class=top_link href="#"><span>联系我们</span></a></li></ul>
</body>
</html>
希望本文所述对大家的css网页设计有所帮助。
相关文章
- 上一篇： CSS基于单张背景图实现自适应宽度的圆角菜单效果代码
- 下一篇： 基于CSS实现的4级下拉菜单效果代码
0731-85579057 ，
