CSS深藍色鼠標懸停放大的國外菜單_菜單導航特效

鼠標懸停放大的一款CSS菜單，來自國外噢，感覺挺不錯的，在多種瀏覽器下兼容。

<html>
<head>
<title>鼠標懸停放大的國外菜單</title>
<style type="text/css">
/* www.wf0088.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訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些