하위 메뉴의 자동 너비

Question

이 기능을 사용할 수 없지만 드롭 다운 메뉴에서 드롭 다운 메뉴 (예 : 계정)를 만드는 방법을 찾지 못했습니다. 나는 많은 것들을 시도,하지만 지금까지 정적 폭이 작동하지만 그게 내가

<div class="menu-wrap"> 
    <div class="menu"> 
      <ul class="menu-inner"> 
       <li class="home"><a href="">Home</a></li> 
       <li class="account"><a href="">Mijn Account</a> 
        <ul> 
         <li><a href="">Mijn website</a></li> 
         <li><a href="">Profiel</a></li> 
         <li><a href="">Persoonlijke gegevens</a></li> 
         <li><a href="">Voorkeuren</a></li> 
         <li><a href="">Email instellingen</a></li> 
         <li><a href="">Log uit</a></li> 
        </ul> 
       </li> 

       <li class="pages"><a href="">Mijn pagina's</a> 
        <ul> 
         <li><a href="">Mijn pagina's</a></li> 
         <li><a href="">Maak een nieuwe pagina</a></li> 
         <li><a href="">Verander pagina volgorde</a></li> 
        </ul> 
       </li> 

       <li class="messages"><a href="">Mijn berichten</a> 
        <ul> 
         <li><a href="">Alle priv&#232; berichten</a></li> 
         <li><a href="">Verzonden berichten</a></li> 
         <li><a href="">Verwijderde berichten</a></li> 
         <li><a href="">Ongelezen berichten</a></li> 
        </ul> 
       </li> 

       <li class="forum"><a href="">Forum</a> 
        <ul> 
         <li><a href="">Nieuwste berichten</a></li> 
         <li><a href="">Overzicht</a></li> 
         <li><a href="">Mijn berichten</a></li> 
         <li><a href="">Top posters</a></li> 
         <li><a href="">Zoek topic</a></li> 
        </ul> 
       </li>    

       <li class="search"><a href="">Zoeken</a> 
        <ul> 
         <li><a href="">Zoeken</a></li> 
         <li><a href="">Vandaag jarig</a></li> 
         <li><a href="">Online leden</a></li> 
         <li><a href="">Alle leden</a></li> 
         <li><a href="">Zoek topic</a></li> 
        </ul> 
       </li> 

       <li class="online"><a href="">Online (x)</a> 
      </ul> 
    </div> 
</div> 

원하는 것을하지 않고 CSS 코드 :

.menu-wrap{ 
position: relative; 
background-color: rgba(0,0,0,0.8); 
height: 30px; 
width: 100%; 
text-align: center; 
} 

.menu { 
    position: relative; 
    width: 860px; 
    margin: 0px auto; 
    height: 30px; 
    line-height: 30px; 
} 

.menu ul { 
    text-align: left; 
    display: inline; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
.menu ul li { 
    font: bold 12px/18px sans-serif; 
    display: inline-block; 
    margin-right: -4px; 
    position: relative; 
    padding: 5px 22px; 
    cursor: pointer; 
    -webkit-transition: all 0.2s; 
    -moz-transition: all 0.2s; 
    -ms-transition: all 0.2s; 
    -o-transition: all 0.2s; 
    transition: all 0.2s; 

} 
.menu ul li:hover { 
    background-color: rgba(0,0,0,0.4); 
} 
.menu ul li a { 
    color: #fff; 
    text-decoration: none; 
    font-size: 14px; 
} 
.menu ul li ul { 
    padding: 0; 
    position: absolute; 
    top: 28px; 
    left: 0; 
    width: auto; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
    display: none; 
    opacity: 0; 
    visibility: hidden; 
    -webkit-transiton: opacity 0.2s; 
    -moz-transition: opacity 0.2s; 
    -ms-transition: opacity 0.2s; 
    -o-transition: opacity 0.2s; 
    -transition: opacity 0.2s; 
    background-color: rgba(0,0,0,0.4) 
} 
.menu ul li ul li { 
    color: #fff; 
} 
.menu ul li ul li:hover { background-color: rgba(0,0,0,0.4);} 
.menu ul li:hover ul { 
    display:inline-block; 
    opacity: 1; 
    visibility: visible; 
} 

내가 원하는 모든 서브 메뉴 자동이있다 텍스트와 너비의 스케일!

Answer 1

당신은 지금처럼 .menu UL의 리튬 UL 리튬 규칙에 공백 속성을 추가해야 할 것 :

.menu ul li ul li { 
    white-space: nowrap; 
}