先上图看看效果：灰色简约CSS横向三级下拉菜单代码
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">
灰色简约三级CSS下拉菜单代码_CSS实例(<a href="http://www.cssk8.com)</title">www.etong360com)</title</a>><br />
<style type="text/css"><br />
body {<br />
margin: 0;<br />
padding: 30px;<br />
background: #FFF;<br />
color: #666;<br />
}<br />
h1 {<br />
font: bold 16px Arial, Helvetica, sans-serif;<br />
}<br />
p {<br />
font: 11px Arial, Helvetica, sans-serif;<br />
}<br />
a {<br />
color: #900;<br />
text-decoration: none;<br />
}<br />
a:hover {<br />
background: #900;<br />
color: #FFF;<br />
}<br />
ul#navmenu {<br />
margin: 0;<br />
border: 0 none;<br />
padding: 0;<br />
width: 500px;<br />
list-style: none;<br />
height: 24px;<br />
}<br />
ul#navmenu li {<br />
margin: 0;<br />
border: 0 none;<br />
padding: 0;<br />
float: left;<br />
display: inline;<br />
list-style: none;<br />
position: relative;<br />
height: 24px;<br />
}<br />
ul#navmenu ul {<br />
margin: 0;<br />
border: 0 none;<br />
padding: 0;<br />
width: 160px;<br />
list-style: none;<br />
display: none;<br />
position: absolute;<br />
top: 24px;<br />
left: 0;<br />
}<br />
ul#navmenu ul li {<br />
float: none;<br />
display: block !important;<br />
display: inline;<br />
}<br />
ul#navmenu a {<br />
border: 1px solid #FFF;<br />
border-right-color: #CCC;<br />
border-bottom-color: #CCC;<br />
padding: 0 6px;<br />
float: none !important;<br />
float: left;<br />
display: block;<br />
background: #EEE;<br />
color: #666;<br />
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;<br />
text-decoration: none;<br />
height: auto !important;<br />
height: 1%;<br />
}<br />
ul#navmenu a:hover,<br />
ul#navmenu li:hover a,<br />
ul#navmenu li.iehover a {<br />
background: #CCC;<br />
color: #FFF;<br />
}<br />
ul#navmenu li:hover li a,<br />
ul#navmenu li.iehover li a {<br />
float: none;<br />
background: #EEE;<br />
color: #666;<br />
}<br />
ul#navmenu li:hover li a:hover,<br />
ul#navmenu li:hover li:hover a,<br />
ul#navmenu li.iehover li a:hover,<br />
ul#navmenu li.iehover li.iehover a {<br />
background: #CCC;<br />
color: #FFF;<br />
}<br />
ul#navmenu li:hover li:hover li a,<br />
ul#navmenu li.iehover li.iehover li a {<br />
background: #EEE;<br />
color: #666;<br />
}<br />
ul#navmenu li:hover li:hover li a:hover,<br />
ul#navmenu li:hover li:hover li:hover a,<br />
ul#navmenu li.iehover li.iehover li a:hover,<br />
ul#navmenu li.iehover li.iehover li.iehover a {<br />
background: #CCC;<br />
color: #FFF;<br />
}<br />
ul#navmenu li:hover li:hover li:hover li a,<br />
ul#navmenu li.iehover li.iehover li.iehover li a {<br />
background: #EEE;<br />
color: #666;<br />
}<br />
ul#navmenu li:hover li:hover li:hover li a:hover,<br />
ul#navmenu li.iehover li.iehover li.iehover li a:hover {<br />
background: #CCC;<br />
color: #FFF;<br />
}<br />
ul#navmenu ul ul,<br />
ul#navmenu ul ul ul {<br />
display: none;<br />
position: absolute;<br />
top: 0;<br />
left: 160px;<br />
}<br />
ul#navmenu li:hover ul ul,<br />
ul#navmenu li:hover ul ul ul,<br />
ul#navmenu li.iehover ul ul,<br />
ul#navmenu li.iehover ul ul ul {<br />
display: none;<br />
}<br />
ul#navmenu li:hover ul,<br />
ul#navmenu ul li:hover ul,<br />
ul#navmenu ul ul li:hover ul,<br />
ul#navmenu li.iehover ul,<br />
ul#navmenu ul li.iehover ul,<br />
ul#navmenu ul ul li.iehover ul {<br />
display: block;<br />
}<br />
</style><br />
<script type="text/JavaScript"><br />
navHover = function() {<br />
var lis = document.getElementByIdx_x("navmenu").getElementsByTagName_r("LI");<br />
for (var i=0; i<lis.length; i++) {<br />
lis[i].onmouseover=function() {<br />
this.className+=" iehover";<br />
}<br />
lis[i].onmouseout=function() {<br />
this.className=this.className.replace(new RegExp(" iehover\b"), "");<br />
}<br />
}<br />
}<br />
if (window.attachEvent) window.attachEvent("onload", navHover);<br />
</script><br />
</head><br />
<body><br />
<h1>CSS Menu - Horizontal Modify by CSS实例</h1><br />
<FCK:hr /><br />
<ul id="navmenu"><br />
<li><a href="/" _fcksavedurl="/">CSS实例</a></li><br />
<li><a href="/" _fcksavedurl="/">Work +</a><br />
<ul><br />
<li><a href="/" _fcksavedurl="/">Websites +</a><br />
<ul><br />
<li><a href="<a href="http://www.cssk8.com">http://www.etong360.com</a>" _fcksavedurl="<a href="http://www.etong360.com">jQuery</a></li">http://www.etong360.com">jQuery</a></li</a>><br />
<li><a href="#" _fcksavedurl="#">Ajax</a></li><br />
<li><a href="/" _fcksavedurl="/">Extjs</a></li><br />
</ul><br />
</li><br />
<li><a href="/" _fcksavedurl="/">Links</a></li><br />
<li><a href="/" _fcksavedurl="/">Contact</a></li><br />
</ul><br />
</li><br />
<li><a href="/" _fcksavedurl="/">Learn+</a><br />
<ul><br />
<li><a href="/" _fcksavedurl="/">CSS +</a><br />
<ul><br />
<li><a href="<a href="http://www.cssk8.com">http://www.etong360.com</a>" _fcksavedurl="<a href="http://www.etong360.com">CSS">http://www.etong360.com">CSS</a>实例</a></li><br />
<li><a href="<a href="http://www.cssk8.com">http://www.etong360.com</a>" _fcksavedurl="<a href="http://www.etong360.com">SpriteNav</a></li">http://www.etong360.com">SpriteNav</a></li</a>><br />
</ul><br />
</li><br />
</ul><br />
</li><br />
<li><a href="<a href="http://www.cssk8.com">http://www.etong360.com</a>" _fcksavedurl="<a href="http://www.etong360.com">Messages</a></li">http://www.etong360.com">Messages</a></li</a>><br />
</ul><br />
</body><br />
</html><br />
</div>
</div>
<ul class="list-inline menu-kj2 text-left wow animated fadeInUp">
<li> 标签：
</li>
<li><div class="bdsharebuttonbox">
<a href="#" class="bds_more" data-cmd="more"></a>
<a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
<a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
<a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a>
<a href="#" class="bds_bdhome" data-cmd="bdhome" title="分享到百度新首页"></a>
<a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
<a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
<a href="#" class="bds_youdao" data-cmd="youdao" title="分享到有道云笔记"></a>
<a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
<a href="#" class="bds_copy" data-cmd="copy" title="分享到复制网址"></a>
</div>
<script>
window._bd_share_config = {
"common": {
"bdSnsKey": {},
"bdText": "",
"bdMini": "2",
"bdMiniList": false,
"bdPic": "",
"bdStyle": "0",
"bdSize": "24"
},
"share": {},
"image": {
"viewList": ["weixin", "qzone", "tieba", "bdhome", "tsina", "sqq", "youdao", "douban", "copy"],
"viewText": "分享到：",
"viewSize": "24"
},
"selectShare": {
"bdContainerClass": null,
"bdSelectMiniList": ["weixin", "qzone", "tieba", "bdhome", "tsina", "sqq", "youdao", "douban", "copy"]
}
};
with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];
</script></li>
</ul>
<ul class="list-inline menu-kj2 text-left wow animated fadeInUp">
<li>上一篇：<a href="/css/527.html">CSS横向导航带鼠标指向说明的代码参考</a></li>
<li>下一篇：<a href="/css/548.html">用CSS提高网页维护的更新效率</a></li>
</ul>
</article>
</div>
</div>
<div class="row news news-page">
<h2 class="h-h2 text-center" style="font-size: 18px;">相关文章</h2>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 wow animated fadeInUp">
<dl class="dl-horizontal">
<dt class="cssa274b01dd50cc">2021-06-09 <span>2021-06-09</span> </dt>
<dd>
<p class="hg-2"> <a href="/seo/742.html" title="进行站内优化的常见几种方法">进行站内优化的常见几种方法</a> </p>
</dd>
</dl>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 wow animated fadeInUp">
<dl class="dl-horizontal">
<dt class="cssa274b01dd50cc">2021-06-08 <span>2021-06-08</span> </dt>
<dd>
<p class="hg-2"> <a href="/seo/741.html" title="手机端SEO优化方法汇总">手机端SEO优化方法汇总</a> </p>
</dd>
</dl>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 wow animated fadeInUp">
<dl class="dl-horizontal">
<dt class="cssa274b01dd50cc">2021-04-24 <span>2021-04-24</span> </dt>
<dd>
<p class="hg-2"> <a href="/wangzhanyunying/740.html" title="企业网站SEO优化方案汇总">企业网站SEO优化方案汇总</a> </p>
</dd>
</dl>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 wow animated fadeInUp">
<dl class="dl-horizontal">
<dt class="cssa274b01dd50cc">2021-04-24 <span>2021-04-24</span> </dt>
<dd>
<p class="hg-2"> <a href="/wangzhanyunying/739.html" title="企业网站上线后运营阶段SEO优化">企业网站上线后运营阶段SEO优化</a> </p>
</dd>
</dl>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 wow animated fadeInUp">
<dl class="dl-horizontal">
<dt class="cssa274b01dd50cc">2021-04-21 <span>2021-04-21</span> </dt>
<dd>
<p class="hg-2"> <a href="/dongtai/738.html" title="厦门E管家科技高端网站定制能做什么">厦门E管家科技高端网站定制能做什么</a> </p>
</dd>
</dl>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 wow animated fadeInUp">
<dl class="dl-horizontal">
<dt class="cssa274b01dd50cc">2021-04-20 <span>2021-04-20</span> </dt>
<dd>
<p class="hg-2"> <a href="/wangzhanyunying/737.html" title="百度竞价推广方案注意事项">百度竞价推广方案注意事项</a> </p>
</dd>
</dl>
</div>
</div>
</div>
</section>
<!--end-->
<!-- 页脚 start -->
<footer class="foot text-center">
<div class="container hidden-xs">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table-responsive">
<tr>
<td>
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0" class="table-responsive">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table-responsive">
<tr>
<td width="81%">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table-responsive">
<tr valign="top">
<td width="199">
<div align="left">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="36">
<div align="left" class="style2">我们能做什么</div>
</td>
</tr>
<tr>
<td height="24">
<div align="left">企业网站建设</div>
</td>
</tr>
<tr>
<td height="24">
<div align="left">手机APP、后台管理系统</div>
</td>
</tr>
<tr>
<td height="24">
<div align="left">搜索引擎优化（SEO）</div>
</td>
</tr>
<tr>
<td height="24">
<div align="left">
域名注册免费备案</div>
</td>
</tr>
<tr>
<td height="24 ">
<div align="left ">云虚拟主机租用</div>
</td>
</tr>
<tr>
<td height="24 ">
<div align="left ">微信公众号,微信小程序</div>
</td>
</tr>
<tr>
<td height="24 ">
<div align="left ">手机网站开发</div>
</td>
</tr>
<tr>
<td height="24 ">
<div align="left ">网站维护及改版</div>
</td>
</tr>
<tr>
<td height="24 ">
<div align="left ">HTML5响应式网站</div>
</td>
</tr>
</table>
</div>
</td>
<td width="199 ">
<div align="left ">
<table width="100% " border="0 " cellspacing="0 " cellpadding="0" class="table-responsive">
<tr>
<td height="36 ">
<div align="left " class="style2 ">我们的优势</div>
</td>
</tr>
<tr>
<td height="24 ">
<div align="left ">细致入微的前期服务</div>
</td>
</tr>
<tr>
<td height="24 ">
<div align="left ">精准的策划服务</div>
</td>
</tr>
<tr>
<td height="24 ">
<div align="left ">完美的网页设计</div>
</td>
</tr>
<tr>
<td height="24 ">
<div align="left ">领先的SEO优化推广技术</div>
</td>
</tr>
<tr>
<td height="24 ">
<div align="left ">最稳定、安全、极速的域名和服务器
</div>
</td>
</tr>
<tr>
<td height="24 ">
<div align="left ">有任何问题，24小时回应并处理</div>
</td>
</tr>
</table>
</div>
</td>
<td width="199 ">
<div align="left ">
<table width="100% " border="0" cellspacing="0" cellpadding="0" class="table-responsive">
<tr>
<td height="36 ">
<div align="left " class="style2 ">请联系我们</div>
</td>
</tr>
<tr>
<td>
<div align="left ">
<table width="100% " border="0 " cellspacing="0 " cellpadding="0" class="table-responsive">
<tr>
<td width="12% " height="25 " valign="top ">
<div align="left ">
<img src="/template/default/skin/images/add.png " hspace="3 " vspace="3 " />
</div>
</td>
<td width="88% ">
<div align="left " class="style1 ">厦门市思明区金尚路</div>
</td>
</tr>
<tr>
<td height="25 ">
<div align="left ">
<img src="/template/default/skin/images/question.png " hspace="3 " />
</div>
</td>
<td><a href="tel:19906039766" style="color:#999">19906039766</a></td>
</tr>
<tr>
<td height="25 ">
<div align="left "></div>
</td>
<td><a style="color:#999" href="https://wpa.qq.com/msgrd?v=3&uin=709288506&site=qq&menu=yes" target="_blank">QQ咨询:709288506</a></td>
</tr>
<tr>
<td height="25 ">
<div align="left "></div>
</td>
<td> </td>
</tr>
<tr>
<td height="25 ">
<div align="left ">
<img src="/template/default/skin/images/email.png " hspace="3 " />
</div>
</td>
<td>
<div align="left " class="style1 ">709288506@qq.com</div>
</td>
</tr>
<tr>
<td height="25 ">
<div align="left ">
<img src="/template/default/skin/images/work_time.png " hspace="3 " />
</div>
</td>
<td>
<div align="left " class="style1 ">早8:30～晚20:30</div>
</td>
</tr>
<tr>
<td height="25 "> </td>
<td height="51 " valign="bottom "> </td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
<td width="19% ">
您需要的是一个专业，靠谱的合作伙伴！请扫描二维码联系我们，惊喜马上就发生
<div align="right ">
<img src="/template/default/skin/images/ewm.jpg " alt="厦门网站建设微信二维码联系方式 " width="180 " height="180 " />
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="14 "> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="copy container ">
<p>
<span></span> 本站关键字：
<strong>厦门网站建设</strong>，
<strong>厦门网站设计</strong>，
<strong>厦门微信小程序</strong>，
<strong>厦门微信公众号建设</strong>，
<strong>厦门APP开发</strong>，
<strong>厦门手机网站</strong>，
<strong>厦门SEO优化</strong>，
<strong>厦门百度推广</strong>
<br>
<span>E管家科技，提供专业的厦门网站建设，一站式管理,服务到家, <a href="https://beian.miit.gov.cn/" target="_blank">闽ICP备2022013166号 </a>
<a href="/taglist/">TAG标签</a>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?82ba8a52f367307feeb0cf97bb988caa";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</span>
</p>
</div>
</footer>
<!--end-->
<ul class="list-unstyled kefu visible-xs-block ">
<li>
<a href="https://wpa.qq.com/msgrd?v=3&uin=709288506&site=qq&menu=yes" target="_blank">
<span class="icon-goutong "></span>
</a>
</li>
<li class="visible-xs-inline-block ">
<a class="lx " href="tel:19906039766" title="拔打电话 ">
<span class="icon-page-lianxi "></span>
</a>
</li>
<li>
<a id="top " class="top " href="#" title="回顶部 ">
<span class="icon-top "></span>
</a>
</li>
</ul>
<!--end-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
<script src="/template/default/skin/js/owl.carousel.quote.js "></script>
<script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="/template/default/skin/js/base.js "></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
wow = new WOW({
animateClass: 'animated',
offset: 100
});
wow.init();
document.getElementById('moar').onclick = function() {
var section = document.createElement('section');
section.className = 'section--purple wow fadeInDown';
this.parentNode.insertBefore(section, this);
};
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
<!--页脚end-->
<!-- 在线服务 start-->
<script>
//在线服务显示
返回顶部
function toTop() {
$(".totop").click(function() {
$("body,html").animate({
"scrollTop": "0px"
}, 300)
});
}
toTop();
</script>
<div class="onlineService hidden-xs">
<ul>
<li>
<p class="text">19906039766</p>
<p class="icon-tel"></p>
</li>
<li>
<p class="text">
<span><a title="点击这里给我发消息" href="http://wpa.qq.com/msgrd?v=3&uin=709288506&menu=yes" target="_blank">业务咨询</a></span>
<span><a title="点击这里给我发消息" href="http://wpa.qq.com/msgrd?v=3&uin=709288506&menu=yes" target="_blank">技术咨询</a></span>
</p>
<p class="icon-qq"></p>
</li>
<li>
<div class="qr">
<img src="/template/default/skin/images/ewm.jpg" alt="厦门E管家科技二维码联系">
<p>微信客服</p>
</div>
<p class="icon-wechat"></p>
</li>
<li class="totop">
<p class="text h48">返回顶部</p>
<p class="icon-totop"></p>
</li>
</ul>
</div>
<!-- 在线服务 end -->
</body>
</html> 