CSS drop down menu - Making children at least the width of parents

Question

I have a three-tier CSS drop down menu that is working fine, but I\'m currently specifying an actual width for the second and third tier list items. I\'ve been fiddling arou

Answer 1

Delete the custom width you added:

#menu1 ul.menu li ul.sub-menu li a {
    width: 140px;
}

The problem now is that the ul.sub-menu's dimension are based on it's relative parent <li>. The trick here is to use white-space: nowrap to push it out of it's parent's dimensions. Then use min-width to set the minimum width allowed (or as you stated "at least the width of parents").

#menu1 ul.menu li ul.sub-menu {
    min-width: 100%;
    white-space: nowrap;
}