CSS菜单（可下拉）银灰色

2024-09-05 12:19:32

字体：大中小

来源：转载

供稿：网友

一款银色的CSS菜单，纯CSS代码实现，兼容IE6/IE7，默认是在IE7下，IE6的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菜单</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style>.menucontainer{background: #fff url(/jscss/demoimg/200904/bgOFF1.gif) top left repeat-x;}.menu {float:left;font-family: sans-serif;width:100%;position:relative;font-size:11px;font-weight:bold;background:url(/jscss/demoimg/200904/bgOFF1.gif) repeat-x;}.menu ul {padding:0;margin:0;list-style-type:none;float:left;position:relative;}.menu ul li {float:left;position:relative;display:inline;}.menu ul li a, .menu ul li a:visited {float:left;display:block;text-decoration:none;color:#034895;width:auto;height:23px;padding:0px 16px 0px 16px;line-height:23px;text-transform:uppercase;}* html .menu ul li a, .menu ul li a:visited {width:auto;w/idth:auto;}.menu ul li ul {display:none;}table {margin:-1px;border-collapse:collapse;font-size:11px;}.menu ul li:hover a {color:#000;background: url(/jscss/demoimg/200904/bgON1.gif) top left repeat-x;}.menu ul li:hover ul {display:block;position:absolute;top:22px;margin-top:1px;left:0;width:100%;border-top:1px solid #fff;}.menu ul li:hover ul li a {display:block;background:#E6E6E6;color:#034895;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:#C9D2DF;color:#000;}</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>CSS</li><li>Forums</li><li>Contact</li></ul></div></div></body></html>

上一篇：简洁CSS 导航条

下一篇：CSS下拉菜单