帶陰影的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   id="iwvjtn8m0"   class="menucontainer"><div   id="iwvjtn8m0"   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）