제목보다 넓은 드롭 다운 메뉴를 만드는 방법은 무엇입니까?

Question

내 메뉴의 기본 구조는 다음과 같습니다. 나는 그것을 바꿀 수 없다. 당신이 Panholder 부엌보다 넓은 볼 수 있듯이

 
Bedroom | Kitchen | Garden 
     | Pot  | 
     | Panholder | 

:

<ul> 
    <li><span>Bedroom</span></li> 
    <li><span>Kitchen</span> 
     <ul> 
      <li><span>Pot</span></li> 
      <li><span>Panholder</span></li> 
     </ul> 
    </li> 
    <li><span>Garden</span></li> 
</ul> 

는 여기에 내가 달성하고자하는 레이아웃입니다. 너비의 부엌에서의 너비를 어떻게 분리 할 수 ​​있습니까? (서브 메뉴는, 내가 모든 하위하지만 현재를 숨길려고 겹쳐 사용할 수 있습니다.

내가 아닌 자바 스크립트 솔루션을 찾고 있어요. 당신이 그것을 시도하려는 경우, I've put it on jsFiddle.

Answer 1

드롭 다운 메뉴에 을 입력하십시오. <ul>. 당신의 jsFiddle, 그것은 것 다음

body > ul > li > ul { 
    position: absolute; 
} 

Answer 2

같은 중첩 된 UL 또는 리튬 항목을 큰 폭을 명시한다 :. 그것의 부모보다

ul { width: 100px; } 
ul li ul { width: 200px; } 

이 중첩 된 UL 큰을해야

을 전체 드롭 다운 CSS의 측면에서 가능한 솔루션의 많음이있다 시작하기 좋은 곳은입니다.