深蓝渐变下拉菜单代码

最新推荐文章于 2023-11-11 11:41:08 发布

weixin_34343308

最新推荐文章于 2023-11-11 11:41:08 发布

阅读量122

点赞数

原文链接：http://www.cnblogs.com/webdm/archive/2011/03/31/2000847.html

版权

代码简介：很漂亮的深蓝色渐变的CSS下拉菜单，用到有两个修饰图片，预览效果请保存一下。这是纯CSS实现的，完全符合WEB标准，兼容所有IE浏览器，代码中有针对IE6的代码，已注释掉了，如果不需要可以删去。

代码内容：

<!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>深蓝渐变下拉菜单代码_网页代码站(www.webdm.cn)</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<style>
.menu {float:left;font-family: arial,verdana,sans-serif;width:100%;position:relative;font-size:11px;font-

weight:bold;
background:url(http://www.webdm.cn/images/20090920/bgoff1_f.gif) repeat-x;border-bottom:3px solid 

#FF0066;/*bottom border color*/}
.menu ul {padding:0;margin:0;list-style-type:none;float:left;position:relative;}
.menu ul li {float:left;position:relative;display:inline;background:url

(http://www.webdm.cn/images/20090920/bgdir.gif) no-repeat bottom right;}

/*style of main items normal state*/
.menu ul li a, .menu ul li a:visited {float:left;display:block;text-

decoration:none;color:#fff;width:auto;height:26px;padding:0px 16px 0px 16px;line-height:26px;}
* html .menu ul li a, .menu ul li a:visited {width:auto;w\idth:auto;}

/*hide sub nav items*/
.menu ul li ul {display:none;}

/*clear the main nav bg*/
.menu ul li ul li{background:none;}

/*style for table of sub nav items*/
table {margin:-1px;border-collapse:collapse;font-size:11px;}

/*specific to non IE browsers*/
/*main nav over state*/
.menu ul li:hover a {color:#fff;background-color:#131546;}

/*show drop-down list*/
.menu ul li:hover ul {display:block;position:absolute;top:25px;margin-top:1px;left:0;width:100%;}

/*drop-down on state*/
.menu ul li:hover ul li a {display:block;background:#131546;color:#fff;height:auto;line-height:15px;padding:2px 

16px 2px 16px;width:120px;border-bottom:1px solid #fff;}

/*sub drop-down over state*/
.menu ul li:hover ul li a:hover {background:#22256D;color:#fff;}
</style>
<!--[if lte IE 6]>
/*ie specific styles*/
/*main nav over state*/
.menu ul li a:hover {color:#fff;background-color:#131546;}
/*positioning for sub nav*/
/* / */
.menu ul li a:hover ul {display:block;position:absolute;top:25px;left:0;background:#fff;margin-top:0;marg\in-

top:1px;}
/*drop-down on state*/
.menu ul li a:hover ul li a {display:block;background:#131546;color:#fff;height:auto;line-

height:15px;padding:2px 16px 2px 16px;width:130px;w\idth:120px;border-bottom:1px solid #fff;}
/*drop-down over state*/
.menu ul li a:hover ul li a:hover {background:#22256D;color:#fff;}
<![endif]-->
</head>

<body>
<!-- BEGIN Menu 
Menu built at /
-->
<div class="menucontainer">
<div class="menu">
<ul>
<li><a href="http://www.webdm.cn" target="_blank">Home</a></li>
<li><a href="#" target="_self">About us</a></li>
<li><a class="drop" href="http://www.webdm.cn" target="_self">Services<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<table><tr><td>
<ul><li><a href="http://www.webdm.cn" target="_self">Design</a></li><li><a href="#" 

target="_self">Strategy</a></li><li><a href="/" target="_self">Analysis</a></li></ul></td></tr></table>
<!--[if lte IE 6]>
</a>
<![endif]-->
</li>
<li><a href="http://www.webdm.cn" target="_self">Support</a></li>
<li><a href="/" target="_self">Forums</a></li>
<li><a href="/" target="_self">Contact Us</a></li>
</ul>
</div>
</div>
<!-- END Menu -->
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/6b71fbeb-d4f6-4926-8853-be20632dfe35.html

转载于:https://www.cnblogs.com/webdm/archive/2011/03/31/2000847.html