Auto width for submenu

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"><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>

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;
}