css二级导航菜单一直无法居中显示?

<style>
.dh{
width:100%;
background:#023d77;
height:50px;
text-align:center;
overflow:hidden;
}
.nav{
width:1024px;
margin:0px auto;
position: absolute;
z-index:9999;
float:left;
}
.nav ul li {
float: left;
}
.nav ul li a {
width: 135px;
height: 50px;
text-align: center;
line-height: 50px;
display: block;
/*border-right: 2px solid #ccc;*/
color: #fff;
}
.nav ul li a:hover {
color: #fff;
}
.nav ul li ul {
position: absolute;
display: none;
}
.nav ul li ul li {
float: none;
}
.nav ul li ul li a {
border-right: none;
border-top: 1px dotted #ccc;
background: #616161;
}
.nav ul li:hover ul {
display: block;
}
.nav ul li:hover ul li a:hover {
color:#fff;
}
</style>
<div class="dh">
<div class="nav">
<ul>
<li><a href="#">网站首页</a></li>
<li><a href="#">关于南科</a>
<ul>
<li><a href="#">公司简介</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">成长历程</a></li>
<li><a href="#">荣誉资质</a></li>
</ul>
</li>
<li><a href="#">产品中心</a>
<ul>
<li class="E_font"><a href="#">Ⅰ</a></li>
<li class="E_font"><a href="#">Ⅱ</a></li>
<li class="E_font"><a href="#">Ⅲ</a></li>
<li class="E_font"><a href="#">Ⅳ</a></li>
<li class="E_font"><a href="#">Ⅴ</a></li>
</ul>
</li>
<li><a href="#">工程案例</a></li>
<li><a href="#">新闻资讯</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div>

加两句样式

.nav ul li ul {left:-30%;}
.nav ul li {position:relative;}

另外强烈不建议这么疯狂嵌套着写样式,这要跟同事合作的话不得把同事嵌套哭了?

温馨提示:答案为网友推荐,仅供参考

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网