2012-08-10 1 views
1

예 : http://www.studentbridges.org/new/드롭 다운이 표시되지 않는 및 탐색은 중앙에 있지

내가 넣을 때 웹 페이지의 상단에 내 네비게이션 바의 범위를 만들기 위해 노력하고 내가 웹 페이지에 걸쳐 할 수있는 탐색의 사업부를 얻었으나, 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 :

여기 내 코드입니다

div#topnav 

{ 
margin: 0px; 

overflow: hidden; 

width: 100%; 

height: 50px; 

background: #8D1D1D; 

} 

문제가 크게 감상 할 수 있습니다 무엇에 대한 모든 입력!

은 HTML은 : 자신이 다른

http://jsfiddle.net/UjEd5/

실제 탐색 옵션을하지만, CSS는 사용중인 동일한 ID/클래스 구조를 사용 : 여기

<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> 
+2

그리고 HTML은 어디에 있습니까? –

+0

죄송합니다, 내가 그것을 추가했습니다! – nellygrl

+1

아니, PHP 코드가 아닙니다. 생성 된 HTML을 보여주십시오. BTW'

'은 오래 전에 사용하지 말고 사용하지 마십시오. –

답변

0

당신은 이동 .

당신은 당신이 "는 TopMenu"DIV하고 "액세스"UL 같은 폭, 그것은 중심 것 모두를 할당하면 내가

<div class="topmenu"> 

<div class="access"> 

을 변경 있습니다 것 막대의 탐색.

희망이 도움이됩니다.

+0

고마워요! 이것은 드롭 다운을 다시 표시하는 데 도움이되었지만 여전히 내비게이션 링크를 센터링 할 수 없습니다. – nellygrl

+0

여기에서 탐색 중심에 대한 답변을 찾았습니다. http://stackoverflow.com/questions/9153448/center-a-navigation-bar – nellygrl

관련 문제