纯CSS重叠选项卡风格的菜单效果

时间：2013-04-01 21:00 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS重叠选项卡风格的菜单效果</title>
<style media="screen" type="text/css">
body {
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
#ts_tabmenu {
	font-size: .75em; 
	padding: 20px 0px 0px 20px; 
}
#ts_tabmenu ul {
	line-height: 1em;
	margin: 0px;
	list-style-type: none; 
	float: left; 
	padding: 0px 0px 0px 5px;
}
#ts_tabmenu ul li {
	float: left; 
}
#ts_tabmenu ul li a {
	text-decoration: none; 
	display: block; 
	float: left; 
	padding: 0px 0px 0px 10px; 
	background: url(http://www.codefans.net/jscss/demoimg/201303/tabs0000.gif) no-repeat left top; 
	margin-left: -5px; 
	z-index: 0; 
	position: relative; 
	color: #666666; 
}
#ts_tabmenu ul li a strong {
	font-weight: normal;
	display: block; 
	float: left; 
	background: url(http://www.codefans.net/jscss/demoimg/201303/tabs0000.gif) no-repeat right top; 
	padding: 6px 10px 7px 5px; 
	cursor: pointer; 
}
#ts_tabmenu ul li a:hover {
	position: relative;
	z-index: 5; 
	background: url(http://www.codefans.net/jscss/demoimg/201303/tabs0000.gif) no-repeat left bottom; 
	color: #000000;  
}
#ts_tabmenu ul li a:hover strong {
	background-image: url(http://www.codefans.net/jscss/demoimg/201303/tabs0000.gif) no-repeat;  
	position: relative;
	z-index: 5;
	background-position: right bottom; 
}
#tsmenu1 #li_tsmenu1 a, #tsmenu2 #li_tsmenu2 a, 
#tsmenu3 #li_tsmenu3 a, #tsmenu4 #li_tsmenu4 a, 
#tsmenu5 #li_tsmenu5 a, #tsmenu6 #li_tsmenu6 a, 
#tsmenu7 #li_tsmenu7 a {
	position: relative;
	z-index: 5; 
	background: url(http://www.codefans.net/jscss/demoimg/201303/tabs0000.gif) no-repeat left bottom;  
	color: #000000; 
}
#tsmenu1 #li_tsmenu1 a strong, #tsmenu2 #li_tsmenu2 a strong, 
#tsmenu3 #li_tsmenu3 a strong, #tsmenu4 #li_tsmenu4 a strong, 
#tsmenu5 #li_tsmenu5 a strong, #tsmenu6 #li_tsmenu6 a strong, 
#tsmenu7 #li_tsmenu7 a strong {	
	background-image: url(http://www.codefans.net/jscss/demoimg/201303/tabs0000.gif) no-repeat;  
	position: relative; 
	z-index: 5; 
	background-position: right bottom; 
}

</style>
</head>

<body id="tsmenu2">
	<div id="ts_tabmenu">
		<ul>
			<li id="li_tsmenu1"><a href="#"><strong>Tutorialsphere</strong></a></li>
			<li id="li_tsmenu2"><a href="#"><strong>Photoshop</strong></a></li>
			<li id="li_tsmenu3"><a href="#"><strong>Illustrator</strong></a></li>
			<li id="li_tsmenu4"><a href="#"><strong>Fireworks</strong></a></li>
			<li id="li_tsmenu5"><a href="#"><strong>Flash</strong></a></li>
			<li id="li_tsmenu6"><a href="#"><strong>CSS</strong></a></li>
			<li id="li_tsmenu7"><a href="#"><strong>PHP</strong></a></li>
		</ul>
	</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

纯CSS重叠选项卡风格的菜单效果，如此美丽与漂亮，而且个性的CSS横向导航菜单，使用起来也非常简单，注意本效果使用了一张选项卡的图片效果，使用时请自己下载放到你的网站上。本菜单清新自然，而且还有鼠标放上去还有背景变换效果，真心不错！纯CSS重叠选项卡风格的菜单效果由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/daohang/1003.html

纯CSS重叠选项卡风格的菜单效果

网页特效