숨겨진 오버플로가있는 래퍼 내부에 CSS 드롭 다운 메뉴 배치

Question

모호한 제목이지만 한 문장으로 원하는 내용을 설명하기는 어렵습니다.

제 문제는 다음과 같습니다. jQuery에 의해 활성화 된 여러 드롭 다운 메뉴가있는 템플릿이 있습니다. 드롭 다운 목록은 다음과 같이 첫 번째 수준 목록에서 두 번째 수준 탐색 항목으로 나타납니다

<ul class="tools"> 
    <li class="dropdown"> 
    <a href="#">Tools</a> 
    <ul class="submenu"> 
     <li><a href="/">Option 1</a></li> 
     <li><a href="/">Option 2</a></li> 
     <li><a href="/">Option 3</a></li> 
    </ul> 
    </li> 
    <li><a href="/">More</a></li> 
</ul> 

하위 메뉴가 기본적으로 숨겨져,이 경우이 속한 목록 항목을 (클릭하여 표시 할 수 있습니다 '도구'). 하위 메뉴는 절대 위치로 지정되므로 항상 클릭 된 링크 바로 아래에 표시됩니다. 이 모든 것이 완벽하게 작동합니다.

문제는이 모든 것이 overflow : hidden이있는 div에 래핑된다는 것입니다. 하위 메뉴가이 div의 오른쪽에 너무 가까우며 목록 항목이 너무 길면 목록이 래퍼의 오른쪽 테두리 아래에 표시되어 부분적으로 보이지 않게 렌더링됩니다. 오버플로 : auto 래퍼에 원하지 않는 스크롤바를 제공합니다. 오버플로 :보기는 문제를 해결하지만 래퍼에 높이가 없어서 배경색과 테두리가 표시되지 않으며 기능의 일부이기 때문에 도움이되지 않습니다.

코드의 큰 무리를 인용하지하려면 라이브 예는 사람이 래퍼 외부에 메뉴 중 하나 쇼를 만들 것입니다 해결책을 알고 있나요

http://www.pkr.nl/template/forumdisplay.html에서 볼 수 있습니다, 또는 그들에 정렬한다 알맞은 방향입니다.

Answer 1

#container .column가 떠 다니는 이유가 있습니까?

float를 제거한 다음 에서 overflow:hidden을 제거하면 메뉴가 표시됩니다.