Question

I am trying to configure a CSS-based drop-down menu.

I have added a border around <UL> and would like it to be the container for all <li> elemets.
It works fine until one of the <li> is longer than the rest. It pushes outside outside <UL> border.

How can I fix it?

Also, the text withing <li> disappears in IE, while everything works great in FF.

Here’s a DEMO. (hover mouse over items)

Answer 1

You currently have set width:100% to your submenu dropdown, this will only be 100% of the parent container which is smaller than your submenu list item that is overflowing your container due to your white-space:nowrap property. Simply remove that width declaration and your submenu should expand with its inner content.

#nav ul {
    left: 0;
    position: absolute;
    top: 100%;
    visibility: hidden;
    z-index: 598;
}

Also, you don’t want to float left your submenu items so you can move that property to where you’re using your child selector.

Demo: http://jsfiddle.net/DqTyh/8/