CSS导航菜单，三级菜单实现代码

</p> <p><TITLE>CSS导航</TITLE> </p> <p><!-- 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(/upload/201011/20101102232944735.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(/upload/201011/20101102232944294.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(/upload/201011/20101102232944264.gif) #e1ecf6 no-repeat left center } #nav LI:hover UL.sub LI A:hover { BACKGROUND: url(/upload/201011/20101102232944198.gif) #548bcf repeat-x center center; COLOR: #fff; } #nav LI:hover UL.sub LI A.fly:hover { BACKGROUND: url(/upload/201011/20101102232944875.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(/upload/201011/20101102232944875.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(/upload/201011/20101102232944875.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(/upload/201011/20101102232944875.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(/upload/201011/20101102232944875.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(/upload/201011/20101102232944264.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(/upload/201011/20101102232944264.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(/upload/201011/20101102232944264.gif) #e1ecf6 no-repeat left center; COLOR: #000; BORDER-RIGHT-COLOR: #e1ecf6; BORDER-LEFT-COLOR: #e1ecf6 } --> </p> <p><UL id="nav"><br /> <LI class="top"><SPAN>首页</SPAN></LI><br /> <LI class="top"><SPAN class="down">关于我们</SPAN><br /> <UL class="sub"><br /> <LI>公司简介</LI><br /> <LI>董事长&总裁</LI><br /> <LI>发展历程</LI><br /> <LI>公司荣誉</LI></UL></LI><br /> <LI class="top"><SPAN class="down">产品&服务</SPAN><br /> <UL class="sub"><br /> <LI>产品1<br /> <UL><br /> <LI>配套</LI><br /> <LI>配件</LI></UL></LI><br /> <LI>产品2<br /> <UL><br /> <LI>产品2-1</LI><br /> <LI>产品2-2</LI></UL></LI><br /> <LI>服务<br /> <UL><br /> <LI>服务111</LI><br /> <LI>服务112</LI><br /> <LI>服务113</LI><br /> <LI>服务114</LI><br /> <LI>服务115</LI></UL></LI></UL></LI><br /> <LI class="top"><SPAN class="down">新闻中心</SPAN><br /> <UL class="sub"><br /> <LI>公告</LI><br /> <LI>行业新闻</LI></UL></LI><br /> <LI class="top"><SPAN class="down">人力资源</SPAN><br /> <UL class="sub"><br /> <LI>人才战略</LI><br /> <LI>社会招聘</LI><br /> <LI>公司福利</LI></UL></LI><br /> <LI class="top"><SPAN class="down">合作伙伴</SPAN><br /> <UL class="sub"><br /> <LI>伙伴1</LI><br /> <LI>伙伴2</LI><br /> <LI>伙伴3</LI></UL></LI><br /> <LI class="top"><SPAN>联系我们</SPAN></LI></UL> </p> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

• ASP+JS三级联动下拉菜单[调用数据库数据]
• php 三级联动菜单
• javascript 三级下拉选择菜单Levels对象
• asp.net DropDownList 三级联动下拉菜单实现代码
• 三级下拉菜单的js实现代码
• 中国地区三级联动下拉菜单效果分析
• jquery 实现二级/三级/多级联动菜单的思路及代码
• js左侧三级菜单导航实例代码
• 从QQ网站中提取的纯JS省市区三级联动菜单
• 基于jquery实现三级下拉菜单