CODEWITHSUNDEEP
htmlcssdrop-down-menunavigationoverflow
Torben
Torben

Reputation: 193

Break out of li-Element in a dropdown navigation

I have a small problem with my CSS-based dropdown navigation

Here is a small fiddle representing its current state:
http://jsfiddle.net/VXafN/
The slide-out should be purely CSS-based like in the fiddle

#main-nav > ul > li:hover > ul {
    display: block;
}


The problem is the fact, that the parent <li> element (red border) of each sub-<ul> (yellow border) stretches to the full size of the sub-navigation.
In my demo you can see that I didn't put any fixed widths on the top-level <li> elements, I don't want them to have a fixed width. They are too large, if the sub-navigation has too large content.

What I am trying to achive is something like this:
http://jsfiddle.net/6XERQ/ (Just added fixed widths)
but without fixed widths on the <li> elements and in the best case, the ul should break out of the parent-<li> element and just take auto-width (yellow border)

I could use JavaScript and/or manipulate the DOM afterwards, but I bet there is a more clean, CSS-based solution to this. I don't want to use any kind of hacks or unclean markup in this case.

The child-<ul> should have the full width its children need, but the parent-<li> should still adjust just to the link-text it uses

Is there any, non-hacky way to achieve this?
I will keep this updated and provide any possible information needed accordingly

Thanks in advance for your help and inspiration

Upvotes: 1

Views: 1207

Answers (1)

Michael
Michael

Reputation: 7092

http://jsfiddle.net/6XERQ/2/

use position:absolute on your sub-menu's.

An example of a live-site using this: http://khill.mhostiuckproductions.com/siteLSSBoilerPlate

CSS:

#main-nav > ul > li {
    position: relative;
    padding: 5px;
    float: left;
    border: 1px dashed red;
    white-space: nowrap;
    width: 120px;
}

#main-nav > ul > li:hover > ul {
    display: block;
    position: absolute;
    top: 30px;
    left: 0;
}

Upvotes: 1

Related Questions