Absoluut element erft ongewenst parent-width

[Jap_]

Hey Tweakers!

Ik ben een css-menu in elkaar aan het zetten volgens deze jsfiddle: http://jsfiddle.net/YXT7j/63/

HTML:

<ul id="nav">
    <li><a>item 1</a>
        <ul class="sub" style="width: 200px;">
            <li><a>item 1.1</a>
                <ul>
                    <li><a>item 1.1.1</a></li>
                    <li><a>item 1.1.2</a></li>
                    <li><a>item 1.1.3</a></li>
                </ul>
            </li>
            <li><a>item 1.2</a>
                <ul>
                    <li><a>item 1.1.1</a></li>
                    <li><a>item 1.1.2</a></li>
                    <li><a>item 1.1.3</a></li>
                </ul>           
            </li>
        </ul>
    </li>
    <li><a>item 2</a>
        <ul class="sub">
            <li><a>item 2.1</a></li>
            <li><a>item 2.2</a></li>
            <li><a>item 2.3</a></li>
        </ul>  
    </li>
    <li><a>item 3</a>
        <ul class="sub">
            <li><a>item 3.1</a></li>
            <li><a>item 3.2</a></li>
            <li><a>item 3.3</a></li>
        </ul>  
    </li>
</ul>

Cascading Stylesheet:

#nav>li {
    float: left; 
    margin: 0 10px;   
    position: relative;   
}
.sub {
    display: none;    
    position: absolute;
    top: 1em;
    left: 0;
}
.sub>li { 
    width: 100px;    
    float: left;
}
#nav>li:hover .sub {
    display: block;
}

De korte versie van mijn vraag is: Hoe kan ik dit resultaat krijgen zonder een expliciete width te geven aan de ul.sub (nu met inline styles gedaan).

De langere versie: Onder item 1 in het menu zie je 2 lijsten naast elkaar. In de html zie je een inline style waarin ik de width declareer van dat submenu. Als ik die width zou weglaten (inline of css) worden de lijsten onder elkaar weergegeven.( http://jsfiddle.net/YXT7j/64/ ).

Het aantal lijsten in een submenu is dynamisch en daarmee ook de gewenste breedte van het submenu. Daarom moet ik hem nu (mbv php) inline toevoegen. Dat is natuurlijk niet netjes. Het zou mooier zijn als het submenu in breedte meerekt met zijn kinderen (li's) zoals elk ander element. Helaas neemt hij zijn parent als uitgangspunt voor zijn breedte en past dat alleen maar aan met expliciet gezette breedtes of de maximum breedte van 1 van zijn kinderen.

Ik heb zelf veel gegoogled, op stackoverflow gezocht en gepost, gefiddled op jsfiddle en nog eens de specificaties van positioning goed doorgenomen maar helaas nog niets kunnen vinden wat me verder helpt.

Zien jullie een oplossing hiervoor?

[ Voor 32% gewijzigd door Jap_ op 30-10-2012 12:13 . Reden: jsFiddle code in topic gezet ]

[NMe]

Zet de relevante delen van je code eens netjes in je topic in plaats van op jsFiddle. Ik kan je in de eerste plaats al niet helpen omdat jsFiddle mobiel een ramp is en in de tweede plaats heeft straks iemand die de search gebruikt niks meer aan je topic als jsFiddle ooit ermee stopt of besluit wat spul op te schonen.

[Jap_]

Excuus, meteen gedaan : ).
Wist niet dat jsfiddle mobiel niet werkte en je hebt gelijk over de search.

[_Thanatos_]

NMe, jsFiddle is veel makkelijker. Dan hoef ik geen moeite te doen om mijn zijn code te rommelen. Of kun je hier op het forum die code wijzigen en het resultaat zien? Nee heh?

Ontopic.
Het lijkt te komen doordat je .sub>li gefloat wordt. Floaten geeft de "voorkeur" aan horizontaal lijnen, terwijl niet-floaten met display:block (en block-like displays) onder elkaar worden getoond. Als ik float uitzet op die selector, dan werkt het.

[Jap_]

Thanks,

Simpelweg de float weghalen helpt niet (als er ook geen expliciet width gezet is). (Zie http://jsfiddle.net/YXT7j/65/)

Desondanks heeft je antwoord me wel aan het denken gezet. Dit is eigenlijk hetzelfde probleem als een ander GoT topic waar ik net de oplossing voor heb gegeven.

Door de li's als inline-block neer te zetten en vervolgens de ul.sub een white-space: no-wrap te geven forceer je het submenu de inline blokken niet te wrappen.
Dat moet trouwens niet gebeuren als er geen meerdere lijsten zijn (zoals item 2 & 3), dus is er een extra class nodig om dit aan te geven (er zijn volgens mij geen css selectors die checken of bepaalde children bestaan, zoals de jquery has()-selector).

Dit is dus de oplossing: http://jsfiddle.net/YXT7j/66/

HTML:

<ul id="nav">
    <li><a>item 1</a>
        <ul class="sub multi">
            <li><a>item 1.1</a>
                <ul>
                    <li><a>item 1.1.1</a></li>
                    <li><a>item 1.1.2</a></li>
                    <li><a>item 1.1.3</a></li>
                </ul>
            </li>
            <li><a>item 1.2</a>
                <ul>
                    <li><a>item 1.1.1</a></li>
                    <li><a>item 1.1.2</a></li>
                    <li><a>item 1.1.3</a></li>
                </ul>           
            </li>
        </ul>
    </li>
    <li><a>item 2</a>
        <ul class="sub">
            <li><a>item 2.1</a></li>
            <li><a>item 2.2</a></li>
            <li><a>item 2.3</a></li>
        </ul>  
    </li>
    <li><a>item 3</a>
        <ul class="sub">
            <li><a>item 3.1</a></li>
            <li><a>item 3.2</a></li>
            <li><a>item 3.3</a></li>
        </ul>  
    </li>
</ul>

Cascading Stylesheet:

#nav>li {
    float: left; 
    margin: 0 10px;   
    position: relative;   
}
.sub {
    display: none;    
    position: absolute;
    top: 1em;
    left: 0;
    
    white-space: nowrap;
}
.sub>li {
    width: 100px;   
}
.multi.sub>li { 
    display: inline-block;
}
#nav>li:hover .sub {
    display: block;
}