【荐】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多级导航菜单_网页代码站(www.webdm.cn)</TITLE>
<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(http://www.webdm.cn/images/20101124/2/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(http://www.webdm.cn/images/20101124/2/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(http://www.webdm.cn/images/20101124/2/arrow.gif) #e1ecf6 no-repeat left center
}
#nav LI:hover UL.sub LI A:hover {BACKGROUND: url(http://www.webdm.cn/images/20101124/2/subli_bg.gif) #548bcf repeat-x center center; COLOR: #fff;
}
#nav LI:hover UL.sub LI A.fly:hover {BACKGROUND: url(http://www.webdm.cn/images/20101124/2/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(http://www.webdm.cn/images/20101124/2/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(http://www.webdm.cn/images/20101124/2/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(http://www.webdm.cn/images/20101124/2/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(http://www.webdm.cn/images/20101124/2/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(http://www.webdm.cn/images/20101124/2/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(http://www.webdm.cn/images/20101124/2/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(http://www.webdm.cn/images/20101124/2/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>代码来自：http://www.webdm.cn/webcode/c8138535-5d67-45ed-9f62-b0e527defdb8.html

转载于:https://www.cnblogs.com/webdm/archive/2011/07/08/2100841.html

【荐】CSS多级导航菜单相关推荐

【荐】自己做一款不错的JS+CSS多级导航菜单
代码简介: 自己做一款不错的二级导航菜单,黑色风格,是根据仿淘宝支付宝菜单而做的,自我感觉还算行吧. 代码内容: <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
bootstrap悬浮多级导航菜单
bootstrap悬浮多级导航菜单效果图: 源码: <!DOCTYPE html> <html lang="zh-cn"><head>< ...
基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览源码下载实现的代码. html代码: <ul class="ce& ...
AlphaControls 控件 TsFrameBar 创建下拉式多级导航菜单
AlphaControls 控件 TsFrameBar 创建下拉式多级导航菜单 TsFrameBar控件是创建一个下拉菜单的工具块. TsFrameBar控件本身,可以通过创建TITEMS,自 ...
Qt动态多级导航菜单
该控件使用QScrollArea.QPushButton.QWidget和QVboxLayout模拟树结构. /** 动态多级导航菜单* 内置5种皮肤.两种折叠/展开图标.顶层节点分割线显隐的功能* ...
element ui 菜单封装_vue+element UI实现多级导航菜单
1.前言在某次日常开发中,项目要求页面的导航菜单需要动态加载,即菜单不能在页面上写死,菜单上的数据由后端开发从数据库中获取返回给前端使用,前端拿到数据后再通过解析数据最终将菜单渲染出来.由于菜单有可 ...
CSS 自适应导航菜单
文章目录以前我写了一篇关于如何为自适应网页制作教程手机导航菜单,现在我又摸索出一种无需JS脚本的自适应导航菜单,它采用纯粹的语义化HTML5标签来完成.该菜单可以左对齐,居中或右对齐,也不像上一种方 ...
div+css 纵向导航菜单及二级菜单弹出
1) 纵向导航菜单 <styletype="text/css"> body { font-family: Verdana;font-size: 12px; line-h ...
全兼容的纯CSS级联导航菜单源码
参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 操作系统:Windows 蓝色理想经典论坛首发,转载请注明出处这次给项目做的级联菜单使用 ...

【荐】CSS多级导航菜单

【荐】CSS多级导航菜单相关推荐

最新文章

热门文章