html 导航栏圆角、纯 css 实现蓝色圆角效果的水平导航菜单代码

纯css实现蓝色圆角效果水平导航菜单代码

这是一款可爱的蓝色圆角水平导航菜单，用到几张背景图片，我觉得这款菜单挺实用，特别是用在个人博客中非常合适。在兼容性方面做的'也很好，几乎兼容所有的浏览器。

运行效果截图如下：

代码如下:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

蓝色圆角水平导航菜单

*{

margin:0;

padding:0;

}

body{

background:#fff;

color:#666;

font:12px/18px Tahoma, Arial, Helvetica, sans-serif;

}

#menu{

width:100%;

margin:15px;

}

#menu ul{

list-style:none;

}

#menu li{

list-style:none;

display:block;

float:left;

margin:0 2px;

}

#menu li a{

display:block;

float:left;

height:66px;

color:#fff;

text-transform:uppercase;

font-size:11px;

font-weight:bold;

background:url(images/menu_009_l.jpg) no-repeat left;

line-height:66px;

padding:0 0 0 9px;

text-decoration:none;

}

#menu li a span{

display:block;

float:left;

background:url(images/menu_009_r.jpg) no-repeat right;

height:66px;

color:#d2eeff;

line-height:66px;

padding:0 18px 0 8px;

}

#menu li a:hover{

display:block;

float:left;

background:url(images/menu_009_h_l.jpg) no-repeat left;

height:66px;

}

#menu li a:hover span{

display:block;

float:left;

background:url(images/menu_009_h_r.jpg) no-repeat right;

color:#fff;

height:66px;

}

#menu li a.current{

display:block;

float:left;

height:66px;

color:#fff;

text-transform:uppercase;

font-size:11px;

font-weight:bold;

background:url(images/menu_009_h_l.jpg) no-repeat left;

line-height:66px;

padding:0 0 0 9px;

text-decoration:none;

}

#menu li a.current span{

display:block;

float:left;

background:url(images/menu_009_h_r.jpg) no-repeat right;

height:66px;

color:#fff;

line-height:66px;

padding:0 18px 0 8px;

}