CSS 드롭 다운 메뉴는 부모 div의 높이에 의해 차단되고에서

Question

내 내 네비게이션 바는 다음과 같이 수평으로 설정하고 내 헤더 사업부에 포함이 설정 :

이

<div id="header-section"> 
    <div id="main-menu-wrapper"> 
     <ul id="main-menu"> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="#">Services</a> 
       <ul id="sub-men"> 
        <li><a href="#">Service 1</a></li> 
        <li><a href="#">Service 2</a></li> 
        <li><a href="#">Service 3</a></li> 
       </ul> 
      </li> 
     </ul> 
     <div class="clear"></div> 
    </div> 
</div> 

내 문제는 하위 메뉴가된다 "main-menu-wrapper"의 높이가 auto로 설정되어 있기 때문에 표시되지 않습니다. 내가 100px와 같은 높이를 설정하면 하위 메뉴가 표시됩니다. 하위 메뉴의 위치를 ​​절대 값 대신 정적으로 설정하면 전체 주 메뉴 - 래퍼가 확장됩니다. 하위 메뉴를 올바르게 표시하려면 어떻게합니까? 당신은 문서 흐름에서 제거 하위 메뉴에 절대 위치를 사용하려고 할 수

#header-section { 
position: relative; 
width: 100%; 
padding: 5px 0px; 
background: #740600; 
} 

#main-menu-wrapper { 
position: relative; 
width: 74%; 
min-width: 600px; 
height: auto; 
margin: 0% auto; 
} 

#main-menu { 
list-style: none; 
font-weight: bold; 
line-height: 150%; 
} 

#main-menu li { 
position: relative; 
float: right; 
margin: 0px 5px; 
} 

#main-menu a { 
padding: 3px; 
color: #ffffff; 
background: #740600; 
text-decoration: none; 
border-radius: 5px; 
} 

#main-menu a:hover { 
padding: 3px; 
color: #740600; 
background: #ffffff; 
text-decoration: none; 
} 

#main-menu li ul { 
position: absolute; 
display: none; 
} 

#main-menu li ul li{ 
float: none; 
} 

#main-menu li:hover ul { 
display: block; 
} 

#main-menu li ul a { 
padding: 3px; 
color: #ccc; 
background: #740600; 
text-decoration: none; 
border-radius: 5px; 
} 

#main-menu li ul a:hover { 
padding: 3px; 
color: #740600; 
background: #ccc; 
text-decoration: none; 
} 


#banner-wrapper { 
position: relative; 
padding: 5px 0 5px; 
} 

#banner { 
position: relative; 
max-width: 75%; 
min-width: 600px; 
margin: 0% auto; 
background: #ffffff; 
} 

#logo { 
max-width: 600px; 
height: auto; 
} 

Answer 1

:

여기에 내 모든 헤더 섹션에 대한 CSS 부분이다.

Answer 2

나는 당신이 여기서 묻고있는 것에 약간 혼란 스럽지만, 나는 메뉴가 보여주는 피들을 만들었다.

# main-menu-wrapper의 스타일을 삭제하고 #header-section에서 배경색을 제거했습니다. http://jsfiddle.net/44vRN/

#header-section { 
position: relative; 
width: 100%; 
padding: 5px 0px; 
}