黑蓝渐变的CSS下拉菜单

2024-09-05 12:19:30

字体：大中小

来源：转载

供稿：网友

很漂亮的黑蓝色渐变的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>黑蓝色CSS下拉菜单</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(/jscss/demoimg/200903/bgoff1.gif) repeat-x;border-bottom:3px solid #FF0066;}.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(/jscss/demoimg/200903/bgdir.gif) no-repeat bottom right;}.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;}.menu ul li ul {display:none;}.menu ul li ul li{background:none;}table {margin:-1px;border-collapse:collapse;font-size:11px;}.menu ul li:hover a {color:#fff;background-color:#131546;}.menu ul li:hover ul {display:block;position:absolute;top:25px;margin-top:1px;left:0;width:100%;}.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;}.menu ul li:hover ul li a:hover {background:#22256D;color:#fff;}</style></head><body><div class="menucontainer"><div class="menu"><ul><li>Home</li><li>About us</li><li>Services<table><tr><td><ul><li>Design</li><li>Strategy</li><li>Analysis</li></ul></td></tr></table></li><li>Support</li><li>Forums</li><li>Contact Us</li></ul></div></div></body></html>

上一篇：悬浮在网页顶部可关闭的工具条（浮动层）

下一篇：纯CSS下拉菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注