2013-10-31 1 views
0

내 탐색 메뉴에서 내 하위 메뉴가 잘립니다. 나는 그것이 오버 플로우와 함께 할 수있는 뭔가가 알고탐색 메뉴에서 하위 메뉴가 잘립니다.

<div id="pagecontainer"> 
<div id="header"> 
    <div id="navmenu"> 
     <div id="navbar"> 
      <ul> 
       <li><a href="#">Home</a></li> 
       <li class="doctool"><a href="#">Docs and Tools</a> 
        <ul> 
         <li><a href="#">test</a></li> 
         <li><a href="#">test</a></li> 
         <li><a href="#">test</a></li> 
        </ul></li> 
       <li class="spacer"></li> 
       <li><a href="#">Contacts</a></li> 
       <li class="last"><a href="#">OnCore</a></li> 
       </ul> 
     </div> 
    </div> 
<!-- Close Header --></div> 
<div class="container"> 
    <div id="Footer"></div> 

: 네비게이션 바에 아이디에 CSS의 숨겨진 라인을,하지만 난 그것을 제거하면 pagecontainer 마술 몇 가지 주요 패딩 여기

을 얻는 것은 내 코드입니다

그래서 여기 내 링크, jsfiddle

답변

1

이 제거입니다, 문제를 제대로 내 CSS를 넣어를 가지고있어 overflow:hidden;#navmenu

에서 #navmenu 사용 패딩

그리고 대신 사용하여 여백 :

#navbar{ 
    padding-top:132px; 
    width:700px; 
    height:40px; 
    padding-left:140px; 
} 

업데이트 바이올린 : http://jsfiddle.net/DYF6U/

나는이 마진이 서로에 무너 아래로 부모를 밀고과 관련이있다 생각합니다. 내가 틀렸다면 누군가 나를 교정하십시오.

여기이 도움이 귀하의 관심 http://www.w3.org/TR/css3-box/#collapsing-margins

희망하는 경우 마진 축소에 대한 몇 가지 문서입니다.

+0

나는 이것에 대해 생각하지 못했지만 작동하는 것처럼 보입니다. – mcadamsjustin

1

이것이 페이지의 레이아웃에 어떤 영향을 미치는지는 모르겠지만 #navmenu 높이를 높이면 하위 메뉴가 더 이상 잘리지 않습니다.

JS Fiddle

코드 조정 : 직접 푸시 다운 얻을 탐색 모음 아래의 요소가있는 경우

#navmenu { 
    margin: auto; 
    overflow: hidden; 
    padding: 0; 
    width: 980px; 
    background-image:url('https://dl.dropboxusercontent.com/u/3876653/header.png'); 
    background-repeat: no-repeat; 
    background-position: center top; 
    height:300px; /*Edit this value to allow room for sub menu items*/ 
} 

, 당신은 그에 따라 사람들을 조정해야 할 수도 있습니다.

+0

감사합니다. 나는 이것을 생각하지 않았습니다. 나는 보통 이미지가있는 navs를 만들지 않는다. 그리고 나는 높이를 조절하는 것이 나의 바 높이로 엉망이 될 것이라고 생각하고 있었다고 생각하지만, 분명히 그것은 이미지이기 때문에 분명히 아니다. 레이아웃에 어떤 영향을 미치는지 확인하겠습니다. 감사합니다. – mcadamsjustin