使用列表写导航栏

先清除li的样式，list-style:none;设置块状显示，可以调整居中。
index.html
 <div class="dh">

<ul>

<li><a href="http://www.baidu.com">商会首页</a></li><span></span>

<li><a href="http://www.baidu.com">关于商会</a></li><span></span>

<li><a href="http://www.baidu.com">商会动态</a></li><span></span>

<li><a href="http://www.baidu.com">商会会员</a></li><span></span>

<li><a href="http://www.baidu.com">会员之家</a></li><span></span>

<li><a href="http://www.baidu.com">信息平台</a></li><span></span>

<li><a href="http://www.baidu.com">联系我们</a></li>

<ul></div>
ys.css 

dh

{

width:100%;

height:50px;

font-size:18px;

text-weight:bold;

font-family:"微软雅黑";

background:#242424;

text-align:center;

line-height:50px;

margin:0 auto;

}

.dh ul

{

margin:0;

padding:0;

list-style:none;

display:inline-block;

}

.dh li

{

float:left;

clear:right;

}

.dh a

{

background:#242424;

color:#ffffff;

text-decoration:none;

}

.dh a:hover

{

width:100px;

height:50px;

background:#ffffff;

color:#242424;

} 

.dh span

{

width:2px;

height:25px;

background:#4e4e4e;

float:left;

margin-top:15px;

margin-left:30px;

margin-right:30px;

}