css3箭头菜单效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3箭头菜单效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery箭头菜单效果</title>
<style type="text/css">
body {background: #666;font: 11px/16px Verdana, Sans-Serif;color:#444;}

a {
	color: #fff;
	text-decoration: none;
}
p {
	margin: 0 0 2em;
}
#container {
	margin: 40px auto;
	width: 600px;
}
#content {
	background: #ccc;
	float: left;
	width: 400px;
	padding: 10px;
}
#side {
	background: #eee;
	float: right;
	width: 180px;
}
	ul#navigation {
		margin: 10px 0;
		padding: 0;
		list-style: none;
	}
		ul#navigation li a {
			display: block;
			background: #999 url(linkbgtwo.gif) no-repeat top right;
			height: 30px;
			line-height: 30px;
			padding-left: 10px;
		}
		ul#navigation li a:hover {
			background: #333 url(linkbgtwo.gif) no-repeat bottom right;
		}
	
	#side p {
		padding: 0 10px;
	}
</style>

</head>
<body>
<div id="container">

	<div id="content">
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

	<ol>
	   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	   <li>Aliquam tincidunt mauris eu risus.</li>
	   <li>Vestibulum auctor dapibus neque.</li>
	</ol>

	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
	</div>

	<div id="side">

	<ul id="navigation">
		<li><a href="#">link one</a></li>
		<li><a href="#">link two</a></li>
		<li><a href="#">link three</a></li>
	</ul>

	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

	</div>
</div>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)