本文实例讲述了CSS实现的灰色下拉菜单效果代码。分享给大家供大家参考。具体如下：
这是一款基于CSS实现的灰色下拉菜单，支持二级的导航菜单，如果不喜欢灰色的话，颜色你自己 调整 下，完善后效果是相当不错的。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/css-gray-style-down-show-menu-codes/
具体代码如下：
复制代码
代码如下:<!DOCTY PE ht ML P ub LIC "-//W3C//DTD XHTML 1.0 Trans IT ional//EN"
"http://HdhCmsTestw3. org /TR/xhtml1/DTD/xhtml1 -t ransitional.dtd">
<html XM lns="http://HdhCmsTestw3.org/1999/xhtml" >
<head>
<title>灰色下拉导航菜单</title>
< ;m eta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-f ami ly:Arial, Sans -s erif; font- Size: 13px; m arg in:0px;
background: transparent url(images/page_bkg.png) repeat scroll top center ;}
h1 {mar gin :0px; padding:20px 0 0 20px;}
p {padding:20px; color: # dcdcdc;}
p a {color:#9BD800;}
p a:hover {color:#B6FF00;}
#header { h ei ght:120px; position:relative;
background: transparent url(images/header_bkg.png) repeat-x scroll top center;}
#nav { margin:0px; padding:0px; position:absolute; top: 70px; dis play :block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px;
position:relative; padding:10px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#808080; -moz-border-radius:10px; - webkit -border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight :bold; }
</style>
</head>
<body>
<div id="header">
<h1>灰色下拉导航菜单</h1>
<ul id="nav">
<li><span>Menu 1</span>
<ul>
<li><a hr ef="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
<li><span>Menu 2</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
<li><span>Menu 3</span>
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 2</a></li>
<li><a href="#">Menu item 3</a></li>
</ul>
</li>
</ul>
</div>
<p><a href="https://HdhCmsTestjs-code .COM /jiaoben/list498_1.html">更多漂亮实用的网页菜单</a></p>
</body>
</html>
希望本文所述对大家div+css网页设计有所帮助。
总结
以上是 为你收集整理的 CSS实现的灰色下拉菜单效果代码 全部内容，希望文章能够帮你解决 CSS实现的灰色下拉菜单效果代码 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS实现的灰色下拉菜单效果代码的详细内容...