Adapted width in CSS dropdown menu

Question

I'm making a dropdown menu with only CSS, and it's not turning out easy the way I've done it. So far I've got an actual dropdown, but the width is the width of the parent element, which is too small for certain items to be displayed in one line.

I tried setting a manual width, but that just unaligns the whole thing and isn't pratical as the menu item could be much longer. Is there anyway of having a width that adapts to the content, without changing the parent width ?

All the site files are located here : http://dev.cuonic.com/bourree/

• Index page : http://dev.cuonic.com/bourree/index.html
• Stylesheet : http://dev.cuonic.com/bourree/css/style.css

Any help is appreciated, thanks :)

Answer 1

Playing around in firefox/firebug I found that this combination seemed to produce the desired effect:

#menu ul ul li {
    display: block;
    float: left;
    left: -34px;
    position: relative;
    width: 200px;
}

Answer 2

Here's a solution that doesn't use a fixed-width for the drop-downs.

First, add the following to the CSS for the links in the drop-downs:

#menu ul ul li a {
    white-space: nowrap;
}

I also had to change #menu ul and #menu ul li to #menu > ul and #menu > ul > li , respectively, so that those CSS styles would apply only to the first level menu items.

Here's a basic reference about the use of > in CSS selectors. I think there are other spots in this example where it would help:

http://reference.sitepoint.com/css/childselector