带阴影的CSS菜单

2024-09-05 12:19:24

字体：大中小

来源：转载

供稿：网友

一款漂亮的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=gb2312"><style>.menucontainer{background: #fff url(/jscss/demoimg/200903/bgOFF.gif) no-repeat bottom left;}.menu {float:left;font-family: arial,verdana,sans-serif;width:100%;position:relative;font-size:11px;font-weight:bold;background:url(/jscss/demoimg/200903/bgOFF.gif) repeat-x bottom left;border-top:4px solid #B30000;}.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/bgDIVIDER.gif) no-repeat bottom right;}.menu ul li a, .menu ul li a:visited {float:left;display:block;text-decoration:none;color:#000;width:auto;color:#666;padding:0px 16px 0px 16px;line-height:40px;height:40px;}* 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:#B30000;background: transparent url(/jscss/demoimg/200903/bgON.gif) bottom left repeat-x;}.menu ul li:hover ul {display:block;position:absolute;top:36px;margin-top:1px;left:0;width:100%;border-top:1px solid #fff;}.menu ul li:hover ul li a {display:block;background:#e3e3e3;color:#333;height:auto;line-height:16px;padding:2px 16px 2px 16px;width:120px;border-top:1px solid #fff;}.menu ul li:hover ul li a:hover {color:#fff;background: #B30000 url(/jscss/demoimg/200903/sub-arrow.gif) no-repeat;background-position: 4px 8px;}</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滑动门（绝对值得一看）

下一篇：模仿微软CSS滑动门（TAB）

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注