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   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>CSS</li><li>Forums</li><li>Contact</li></ul></div></div></body></html>

上一篇：簡潔CSS 導航條

下一篇：CSS下拉菜單