CSS深蓝色鼠标悬停放大的国外菜单_菜单导航特效

鼠标悬停放大的一款CSS菜单，来自国外噢，感觉挺不错的，在多种浏览器下兼容。

<html>
<head>
<title>鼠标悬停放大的国外菜单</title>
<style type="text/css">
/* www.mb5u.com */
h1 {
font-family:arial;
}
	ul#navlist {
		display: inline;
		list-style: none;
	}
	ul#navlist li {
		float: left;
		width: 80px;
		height:30px;
	}
	ul#navlist li a {
		text-decoration: none;
		width: 80px;
		height:30px;
		padding:5px;
		font-size:9pt;
		font-family:arial;
		text-align:center;
		line-height:50px;
		border-top: 5px solid #fff;
		border-bottom: 5px solid #fff;
		border-right:1px solid #fff;
		border-left:1px solid #fff;
		background: #003663;
		display:block;
		color:#fff;
		}
		ul#navlist li a:hover {
		border-top: 5px solid #004a80;
		border-bottom: 5px solid #004a80;
		background:#004a80;
		font-size:9pt;
		font-weight:bold;
		}
</style>
</head>
<body>
<div id="container">
	<div id="header">
	<h1>CSS Menu: 悬停放大</h1>
	</div>
	<div id="navbar">
		<ul id="navlist">
			<li><a href="#">模板无忧</a></li>
			<li><a href="#">网页殊效</a></li>
			<li><a href="#">最新更新</a></li>
			<li><a href="#">资源分类</a></li>
			<li><a href="#">下载排行</a></li>
			<li><a href="#">ASP源码</a></li>
			<li><a href="#">PHP源码</a></li>
			<li><a href="#">我的博客</a></li>
		</ul>
	</div>
	</div>
</body>
</html>

所属频道：菜单导航特效/更新时间：2012-11-05

[收藏][报错][返回列表]

CSS深蓝色鼠标悬停放大的国外菜单_菜单导航特效

菜单导航特效Rss订阅特效代码搜索

菜单导航特效推荐

猜你也喜欢看这些