Html 下拉列表不显示&;导航未居中

Html 下拉列表不显示&;导航未居中,html,css,layout,Html,Css,Layout,例如: 我试图使我的导航栏横跨网页顶部,我让导航的div横跨整个网页,但当我将导航菜单放在div内时,下拉菜单停止工作,链接不居中,无论我做什么(文本对齐:CSS中的居中,标题中的标记不起作用) 这是我的密码: 航行 .access { clear: both; display: block; float: left; margin: 0 auto 6px; width: 100%; } .access ul { font-size: 16px; list-style: none; margin

例如:

我试图使我的导航栏横跨网页顶部,我让导航的div横跨整个网页,但当我将导航菜单放在div内时,下拉菜单停止工作,链接不居中,无论我做什么(文本对齐: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#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>
菜单项菜单项类型自定义菜单项对象自定义当前菜单项当前页面菜单项菜单项主菜单项43>
  • 给你:

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

    你会注意到我变了

    <div class="access">
    
    
    

    
    
    如果将“topmenu”DIV和“access”UL分配为相同的宽度,它将居中 导航栏中的导航


    希望这有帮助

    不,不是PHP代码。显示生成的HTML。顺便说一句,
    很久以前就被弃用了,不要使用它。试试css:
    #topnav{text align:center;}
    而不是抱歉,我添加了生成的HTML。另外,在css中添加text align:center也不起作用。
    溢出:隐藏在
    div#topnav
    中是隐藏下拉列表的原因。谢谢!这确实有助于再次显示下拉列表,但我仍然无法将导航链接居中。在此处找到导航居中的答案:
    <div class="topmenu">