CSS菜單（很大氣）

2024-09-05 12:20:53

字體：大中小

供稿：網(wǎng)友

從國外網(wǎng)站找到的CSS菜單，用到了幾個(gè)背景圖片，請(qǐng)自己下載吧，效果還是不錯(cuò)的，挺大氣，放上來共享給大家。

<!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><style>#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(/jscss/demoimg/200905/dolphin_bg.gif) repeat-x bottom left;padding:0 0 0 20px;}#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}#dolphinnav ul li{display:block;float:left;margin:0 1px;}#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}#dolphinnav ul li a:hover{color:#fff;background:transparent url(/jscss/demoimg/200905/dolphin_bg-OVER.gif) repeat-x bottom left;}#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(/jscss/demoimg/200905/dolphin_left-ON.gif) no-repeat top left;line-height:275%;}#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(/jscss/demoimg/200905/dolphin_right-ON.gif) no-repeat top right;height:33px;}</style></head><body>	<div   class="iwvjtn8m0"   id="dolphincontainer">	<div   class="iwvjtn8m0"   id="dolphinnav">	<ul>	<li><span>Home</span></li>	<li><span>About Us</span></li>	<li><span>Services</span></li>	<li><span>Our Work</span></li>	<li><span>Contact Us</span></li>	</ul>	</div>	</div></body></html>

上一篇：下滑菜單CSS+Js，jQuery1.3.2代碼

下一篇：Tab滑動(dòng)門效果