下拉列表不显示与导航不居中

Question

例：http://www.studentbridges.org/new/

我想使整个网页的上面有我的导航栏跨度，我得到了Nav的DIV整个网页跨越，但是当我把div内的导航菜单，下拉停止工作，链接不居中，无论我做什么（text-align：CSS中的中心，标题中的标记都不起作用）。

这里是我的代码：

导航

.access { 
clear: both; 
display: block; 
float: left; 
margin: 0 auto 6px; 
width: 100%; 
} 
.access ul { 
font-size: 16px; 
list-style: none; 
margin: 0 0 0 -0.8125em; 
padding-left: 0; 
} 
.access li { 
float: left; 
position: relative; 
} 
.access a { 
color: #eee; 
display: block; 
line-height: 3.333em; 
padding: 0 1.2125em; 
text-decoration: none; 
} 
.access ul ul { 
display: none; 
float: left; 
margin: 0; 
position: absolute; 
top: 3.333em; 
left: 0; 
width: 188px; 
z-index: 99999; 
} 
.access ul ul ul { 
left: 100%; 
top: 0; 
} 
.access ul ul a { 
background: #EAC57E; 
border-bottom: 1px dotted #ddd; 
color: #F7E7C6; 
font-size: 14px; 
font-weight: normal; 
height: auto; 
line-height: 1.4em; 
padding: 10px 10px; 
width: 168px; 
} 
.access li:hover > a, 
.access ul ul :hover > a, 
.access a:focus { 
background: #DBAA4A; 
} 
.access li:hover > a, 
.access a:focus { 
background: #DBAA4A; /* Show a solid color for older browsers */; 
color: #F7E7C6; 
} 
.access ul li:hover > ul { 
    display: block; 
} 
.access .current-menu-item > a, 
.access .current-menu-ancestor > a, 
.access .current_page_item > a, 
.access .current_page_ancestor > a { 
font-weight: bold; 
} 

顶部导航DIV：

div#topnav 

{ 
margin: 0px; 

overflow: hidden; 

width: 100%; 

height: 50px; 

background: #8D1D1D; 

} 

什么问题可能将不胜​​感激任何投入！

的HTML：

<div id="topnav"><center><div class="access"><ul id="menu-home" class="access"><li id="menu-item-43" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-43"><a href="http://www.studentbridges.org/new/">Home</a></li> 
<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://www.studentbridges.org/new/sample-page/">About Us</a> 
<ul class="sub-menu"> 
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://www.studentbridges.org/new/sample-page/history/">History</a></li> 
<li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://www.studentbridges.org/new/sample-page/resources/">Resources</a></li> 
<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52"><a href="http://www.studentbridges.org/new/sample-page/testimonials/">Testimonials</a></li> 
<li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://www.studentbridges.org/new/sample-page/community-partnerships/">Community Partnerships</a></li> 
<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://www.studentbridges.org/new/sample-page/donors-supporters/">Donors &#038; Supporters</a></li> 
<li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"><a href="http://www.studentbridges.org/new/sample-page/contribute/">Contribute</a></li> 
<li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="http://www.studentbridges.org/new/sample-page/advisory-boards/">Advisory Boards</a></li> 
</ul> 
</li> 
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://www.studentbridges.org/new/for-umass-students/">For UMass Students</a> 
<ul class="sub-menu"> 
<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://www.studentbridges.org/new/for-umass-students/sb-service-learning-293/">SB Service Learning 293</a></li> 
<li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59"><a href="http://www.studentbridges.org/new/for-umass-students/volunteer-oppertunities/">Volunteer Oppertunities</a></li> 
<li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-58"><a href="http://www.studentbridges.org/new/for-umass-students/staff-openings/">Staff Openings</a></li> 
</ul> 
</li> 
<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://www.studentbridges.org/new/access-materials/">Access Materials</a></li> 
<li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://www.studentbridges.org/new/advocacy/">Advocacy</a></li> 
<li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="http://www.studentbridges.org/new/for-community-members/">For Community Members</a></li> 
<li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a href="http://www.studentbridges.org/new/our-staff/">Our Staff</a></li> 
<li id="menu-item-61" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-61"><a href="http://www.studentbridges.org/new/photos/">Photos</a></li> 
<li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-62"><a href="http://www.studentbridges.org/new/blog/">Blog</a></li> 
</ul></div></center></div> 

Answer 1

在这里你去：

http://jsfiddle.net/UjEd5/

实际导航选项本身是不同的，但是CSS使用相同的ID /类 结构正在使用。

你会注意到，我改变

<div class="access"> 

到

<div class="topmenu"> 

如果分配无论是“顶部菜单” DIV和“访问” UL相同的宽度，也将围绕 的在栏中导航。

希望这会有所帮助！