鼠标滑过变色的菜单条

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 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菜单

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注