[CSS] UL background breedte

[Ronnyrr]

Beste tweakers,

Voor een project ben ik bezig met zelf een menu te maken met dropdown. Hier moet de achtergrond, van de dropdown, automatisch meeschalen met de tekst in de li.

Dit klinkt volgens mij heel makkelijk, echter kan ik niet tot de oplossing komen..

De css die ik hiervoor gebruik is als volgt:

Cascading Stylesheet:

nav { width:100%; height:35px;} 
    nav ul { position:relative; float:right;} 
        nav ul li { position:relative; width:auto; height:25px; float:left;}
            nav ul li ul { position:absolute; width:auto; height:auto; top:19px; left:0px; background-color:#a79764; background-size:100%; display:none;}
                nav ul li ul li { width:92%; height:15px; float:left;} 

Hier heb ik de onnodige dingen eruit gehaald zoals, padding, margins en font dingen

Ik zit al een hele tijd te puzzelen met width, background-size etc.
Helaas kom ik er nog steeds niet uit.

Hierbij ook een stukje van de HTML, hoewel die me vanzelf sprekend lijkt misschien wel handig om erbij te posten.

HTML:

<ul class="menu">
    <li><a href="/index.php/nl/honingwijnen-nl">Honingwijnen</a>
        <ul>
            <li><a href="/index.php/nl/ingredienten">Ingrediënten</a></li>
            <li><a href="/index.php/nl/honing">Honing</a></li>
            <li><a href="/index.php/nl/de-wijnen">De Wijnen</a></li>
        </ul>
    </li>
    
    <li><a href="/index.php/nl/assortiment">Assortiment</a>
        <ul>
            <li><a href="/index.php/nl/honing-kruidenwijn-rood">Honing Kruidenwijn Rood</a></li>
            <li><a href="/index.php/nl/honing-kruidenwijn-wit">Honing Kruidenwijn Wit</a></li>
            <li><a href="/index.php/nl/honing-gemberwijn">Honing Gemberwijn</a></li>
        </ul>
    </li>
</ul>

Voor de handigheid heb ik ook even een jsFiddle gemaakt:
http://jsfiddle.net/GWDB6/

Nogmaals, het leek me heel simpel, helaas loop ik hier nu vast.
Ik heb al geprobeerd de oplossing te zoeken op google (zoektermen: "CSS UL scale background to text" en meer die richting op), maar ik kon geen bruikbaar antwoord vinden. Terwijl dit toch iets is wat veel mensen wel willen lijkt me.

Zoek ik verkeerd? Doe ik iets totaal verkeerd? Zie ik iets over het hoofd?
Alle tips zijn welkom

[Acid_Burn]

white-space: nowrap; in je nav ul zetten?