纯CSS圆角导航菜单_菜单导航特效

纯CSS圆角导航菜单,纯CSS实现漂亮的圆角边界菜单，超不错的效果，没有用到图片，全部是CSS写出来的，佩服作者的水平吧？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312" />
<title>纯CSS实现漂亮的边界菜单- www.mb5u.com</title>
<style type="text/css">
.outer ul {margin:3em; padding:0; list-style-type:none; background:transparent; height:3em;}
.outer li {display:block; float:left;}
.outer {display:block; position:relative; background:#eee; padding:2em; margin:20px 15px;}
.xsnazzy {background:transparent;}
.xsnazzy span {text-align:center; color:#fff; margin:0; font-weight:normal; padding-bottom:0.5em;}
/*/*/
.xtop {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow: hidden; 
/*www.mb5u.com */ 
}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#dd7; border-left:1px solid #fff; border-right:1px solid #fff;}
.xb1 {margin:0 5px; background:#fff;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxmrc {display:block; background:#cc6; border:0 solid #fff; border-width:0 1px 1px 1px;}
/*www.mb5u.com */ 
a.xmenu2, a.xmenu2:visited {display:block; text-decoration:none; width:7em; font-size:0.9em;}
a.xmenu2:hover {background:transparent; cursor:pointer;}
a.xmenu2:hover span {color:#000;}/*www.mb5u.com */ 
a.xmenu2:hover .xboxmrc {background:#eee; border-color:#888; border-bottom:1px solid #eee;}
a.xmenu2:hover .xb1 {background:#888;}
a.xmenu2:hover .xb2, a.xmenu2:hover .xb3, a.xmenu2:hover .xb4 {background:#fff; border-color:#888;}
.xboxmrcd {display:block; background:#cc6; border:0 solid #fff; border-width:1px 1px 0 1px; padding-top:5px;}
a.xmenu2:hover .xboxmrcd {background:#eee; border-color:#888; border-top:1px solid #eee;}

</style>
</head>
<body>

<div class="outer">
<ul>
<li>
<a class="xmenu2" href="/">
Paul Cezanne
</a>
</li>
<li>
<a class="xmenu2" href="/">
Henri mb5u.com
</a>
</li>
<li>
<a class="xmenu2" href="/">
William 中文社区
</a>
</li>
<li>
<a class="xmenu2" href="/">
John Constable
</a>
</li>
<li>
<a class="xmenu2" href="/">
Claude 模板无忧
</a>
</li>
</ul>
</div>

<div class="outer">
<ul>
<li>
<a class="xmenu2" href="/">
Paul Cezanne
</a>
</li>
<li>
<a class="xmenu2" href="/">
Henri Matisse
</a>
</li>
<li>
<a class="xmenu2" href="/jscss/">
William 网页殊效
</a>
</li>
<li>
<a class="xmenu2" href="/">
John Constable
</a>
</li>
<li>
<a class="xmenu2" href="/">
Claude 最新下载
</a>
</li>
</ul>
</div>
</body>
</html>

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

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

纯CSS圆角导航菜单_菜单导航特效

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

菜单导航特效推荐

猜你也喜欢看这些