鼠標滑過變色的菜單條

2024-09-05 12:19:53

字體：大中小

來源：轉載

供稿：網友

鼠標滑過變色的CSS菜單條，用了不少圖片，不過兼容性挺好，相信代碼大多數都能看懂，共享給大家，希望喜歡哦。

<html><head><title>鼠標滑過變色的菜單條</title><style type="text/css">#pro13 ul {margin:0 auto; padding:10px; list-style:none; white-space:nowrap; list-style:none; height:35px; position:relative; background:#aa6; font-size:11px;}#pro13 li {margin:0; padding:0; float:left;}#pro13 li a {display:block; float:left; height:35px; line-height:35px; color:#ddd; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 15px; cursor:pointer; background:url(/jscss/demoimg/200905/pro_13_0a.gif) no-repeat;}#pro13 li a b {float:left; display:block; padding:0 30px 0 15px; background:url(/jscss/demoimg/200905/pro_13_0b.gif) no-repeat right top;}#pro13 li.current a {color:#cc0; background:url(/jscss/demoimg/200905/pro_13_2a.gif) no-repeat; line-height:33px;}#pro13 li.current a b {background:url(/jscss/demoimg/200905/pro_13_2b.gif) no-repeat right top; padding-bottom:2px;}#pro13 li a:hover {color:#ff0; background: url(/jscss/demoimg/200905/pro_13_1a.gif) no-repeat; line-height:35px;}#pro13 li a:hover b {background:url(/jscss/demoimg/200905/pro_13_1b.gif) no-repeat right top;}#pro13 li.current a:hover {color:#cc0; background: url(/jscss/demoimg/200905/pro_13_2a.gif) no-repeat; cursor:default; line-height:33px;}#pro13 li.current a:hover b {background:url(/jscss/demoimg/200905/pro_13_2b.gif) no-repeat right top; padding-bottom:2px;}</style></head><body><div   class="iwvjtn8m0"   id="pro13"><ul><li><b>Index</b></li><li><b>Service</b></li><li><b>Products</b></li><li><b>Welcome</b></li><li><b>Search</b></li></ul></div></body></html>

上一篇：深灰色大按鈕式的CSS導航條

下一篇：鼠標放上放大的純CSS菜單