您的位置：首页 > Web前端 > CSS

CSS打造导航菜单

2011-07-21 22:05 507 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS打造导航菜单</title>
<style>
ul.nav{
margin:0;
padding:0;
font-size:12px;
list-style-type:none;
width:450px;
background:#FAA819 url(bj.gif) repeat-x;
overflow:hidden;
}
ul.nav li{
float:left;
}
ul.nav a{
display:block;
padding:0 8px;
line-height:30px;
text-decoration:none;
color:#833705;
background:url(line.gif) no-repeat left top;
}
ul.nav li:first-child a{
background:none;
}
ul.nav a:hover,
ul.nav a:focus{
color:#FFF;
}
</style>
</head>

<body>
<ul class="nav">
<li><a href="javascript:;">首页</a></li>
<li><a href="javascript:;">公司简介</a></li>
<li><a href="javascript:;">产品中心</a></li>
<li><a href="javascript:;">公司荣誉</a></li>
<li><a href="javascript:;">销售网络</a></li>
<li><a href="javascript:;">联系方式</a></li>
<li><a href="javascript:;">在线加盟</a></li>
</ul>
</body>
</html>

IE6不支持first-child伪类的问题可以用jquery解决

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css javascript jquery url float class

相关文章推荐

新的分享

章节导航