CSS 중첩 메뉴 자동 너비가 작동하지 않습니다.

Question

세 번째 계층 구조 수준에서 모든 것이 잘 작동하는이 중첩 메뉴가 있습니다. 당신이 메뉴 마우스 커서를 올려 놓으면 http://jsfiddle.net/wvsL9/

:

내가 코드와 여기에 결과가 "PRODUKTER"다음 "PRIVAT을", 당신은 폭이 문제가 "자동"아니다 참조하십시오. 나는 정말로 여기에 갇혀 있으며 많은 변형을 시도했다. 내가 원하는대로 작동하지 않는 이유를 알 수 있습니까? 사전

#menu, #menu ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    font-size: 0.9em; 
    font-family:'Helvetica Neue For BBC W01 Bd'; 
} 

#menu:before, 
#menu:after { 
    content: ""; 
    display: table; 
} 

#menu:after { 
    clear: both; 
} 

#menu { 
    zoom:1; 
} 

#menu li { 
    float: left; 
    display: inline-block; 
    position: relative; 
} 

#menu li:last-child { 
    border: 0; 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none;  
} 


#menu a { 
    display: inline-block; 
    padding: 50px 8px; 
    color: #000; 
    text-transform: uppercase; 
    text-decoration: none; 
    font-weight: bold; 
} 

#menu li:hover > a { 
    background: #000; 
    color: #fff; 
} 

#menu li.current-menu-item a{ 
    background: #000; 
    color: #FFF; 
} 

*html #menu li a:hover { /* IE6 only */ 
    color: #fafafa; 
} 

#menu ul { 
    margin: 20px 0 0 0; 
    _margin: 0; /*IE6 only*/ 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    width: 100%; 
    top: 120px; 
    left: 0; 
    z-index: 1;  
    background: #000; 
    -webkit-transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -ms-transition: all .2s ease-in-out; 
    -o-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
} 

#menu li:hover > ul { 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 
} 

#menu ul li { 
    position: static; 
    float: none; 
    display: block; 
    border: 0; 
    _line-height: 0; /*IE6 only*/ 
} 

#menu ul li:last-child { 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none;  
} 


#menu ul a {  
    padding-top: 10px; 
    padding-bottom: 10px; 
    _height: 10px; /*IE6 only*/ 
    display: block; 
    white-space: nowrap; 
    float: none; 
    text-transform: none; 
    color: #fff; 
} 

#menu ul a:hover { 
    background-color: #f60c0c; 
} 

#menu ul li:first-child > a { 
    -moz-border-radius: 3px 3px 0 0; 
    -webkit-border-radius: 3px 3px 0 0; 
    border-radius: 3px 3px 0 0; 
} 

#menu ul li:first-child > a:after { 
    content: ''; 
    position: absolute; 
    left: 40px; 
    top: -6px; 
} 

#menu ul ul { 
    top: 0; 
    left: 100%; 
    margin: 0 0 0 20px; 
    _margin: 0; /*IE6 only*/  
} 

#menu ul ul li{ 
    display: block; 
    width: auto; 
    float: none; 
} 

#menu ul ul li a{ 
    display: block; 
    padding: 10px 50px; 
} 

#menu ul ul li:first-child a:after { 
    left: -6px; 
    top: 50%; 
    margin-top: -6px; 
    border-left: 0; 
} 

#menu ul li:first-child a:hover:after { 
    border-bottom-color: #04acec; 
} 

#menu ul ul li:first-child a:hover:after { 
    border-right-color: #0299d3; 
    border-bottom-color: transparent; 
} 

#menu ul li:last-child > a { 
    -moz-border-radius: 0 0 3px 3px; 
    -webkit-border-radius: 0 0 3px 3px; 
    border-radius: 0 0 3px 3px; 
} 

Answer 1

인이 CSS를

#menu .sub-menu{width:auto; min-width:100%;} 

을 추가합니다. 그냥이 추가

#menu ul ul { 
    width: auto; 
} 

JSFiddle example

Answer 2

에서

덕분에 여기 당신이 올바른 요소에 width: auto; 작업 할 수 있습니다 예를 http://jsfiddle.net/wvsL9/3/