简单、清新CSS水平菜单

答案：<html>
<head>
<title>CSS菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#chromemenu{
width: 99%;
font-weight: bold;
font-size: 12px;
}
#chromemenu:after{
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

#chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background: url(/jscss/demoimg/200906/chromebg.gif) center center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left;
}

#chromemenu ul li{
display: inline;
}

#chromemenu ul li a{
color: #494949;
padding: 5px;
margin: 0;
text-decoration: none;
border-right: 1px solid #DADADA;
}

#chromemenu ul li a:hover{
background: url(/jscss/demoimg/200906/chromebg2.gif) center center repeat-x;
}

</style>
</head>

<body>
<div id="chromemenu">
<ul>
<li><a href="/">网站首页</a></li>
<li><a href="/jscss/">网页特效</a></li>
<li><a href="#">源代码</a></li>
<li><a href="/other/lastupdate.shtml">最新更新</a></li>
<li><a href="/other/top100.shtml">下载排行</a></li>
<li><a href="/guestbook/">网站留言</a></li>
</ul>
</div>
</body>
</html>

上一个：仿QQ迷你首页的左右滚动Tab选项卡
下一个：另类飞出的CSS分类导航菜单

更多图片编程知识: