Auto width for submenu - html

Question

I can't get this to work, but in my dropdown menu I just simply can't find a way to make the dropdown menu (for example on account) have it scale with the text.
I tried many things, but only so far a static width is working but that is not what I want
<div class="menu-wrap">
<div class="menu">
<ul class="menu-inner">
<li class="home">Home</li>
<li class="account">Mijn Account
<ul>
<li>Mijn website</li>
<li>Profiel</li>
<li>Persoonlijke gegevens</li>
<li>Voorkeuren</li>
<li>Email instellingen</li>
<li>Log uit</li>
</ul>
</li>
<li class="pages">Mijn pagina's
<ul>
<li>Mijn pagina's</li>
<li>Maak een nieuwe pagina</li>
<li>Verander pagina volgorde</li>
</ul>
</li>
<li class="messages">Mijn berichten
<ul>
<li>Alle privè berichten</li>
<li>Verzonden berichten</li>
<li>Verwijderde berichten</li>
<li>Ongelezen berichten</li>
</ul>
</li>
<li class="forum">Forum
<ul>
<li>Nieuwste berichten</li>
<li>Overzicht</li>
<li>Mijn berichten</li>
<li>Top posters</li>
<li>Zoek topic</li>
</ul>
</li>
<li class="search">Zoeken
<ul>
<li>Zoeken</li>
<li>Vandaag jarig</li>
<li>Online leden</li>
<li>Alle leden</li>
<li>Zoek topic</li>
</ul>
</li>
<li class="online">Online (x)
</ul>
</div>
</div>
and the css code:
.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;
}
All I want is have the sub menus auto scale in width with the text!

Answer 1

You are going to have to add a white-space property to the .menu ul li ul li rule like so:
.menu ul li ul li {
white-space: nowrap;
}