CSS菜单（很大气）

2024-09-05 12:20:53

字体：大中小

来源：转载

供稿：网友

从国外网站找到的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><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 id="dolphincontainer">	<div 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滑动门效果

学习交流

如何查找有故障的配件

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

热门图片

猜你喜欢的新闻

猜你喜欢的关注