RiddleMeThis
New Member
I have a small problem with my CSS-based dropdown navigationHere is a small fiddle representing its current state:
http://jsfiddle.net/VXafN/
The slide-out should be purely CSS-based like in the fiddle\[code\]#main-nav > ul > li:hover > ul { display: block;}\[/code\]
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 usesIs there any, non-hacky way to achieve this?
I will keep this updated and provide any possible information needed accordinglyThanks in advance for your help and inspiration
http://jsfiddle.net/VXafN/
The slide-out should be purely CSS-based like in the fiddle\[code\]#main-nav > ul > li:hover > ul { display: block;}\[/code\]
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 usesIs there any, non-hacky way to achieve this?
I will keep this updated and provide any possible information needed accordinglyThanks in advance for your help and inspiration