Question

I’m building a navigation with has a drop down unordered list within an unordered list. I’d like to make the list items as wide as at least the “head” list item so that the drop down menu looks right. Just now the drop down menu is thinner as the line items have a lower character count than the line item that contains the unordered list.

I’d like to make somehting of the order:

ul li ul {
{width: *as wide as ul li*;
}

Is it possible to do this without javascript and just within css alone?

Answer 1

Yes, it is. Technically, the ul is already the same width, but it doesn’t appear to be due to margins and padding. To change this, use this CSS:

ul li ul {
 width:100%;
 margin-left:0;
 margin-right:0;
 padding-left:0;
 padding-right:0;
}

You may also want to include the following CSS to change the padding/margin of the li child as well:

ul li ul > li {
 width:100%;
 margin-left:0;
 margin-right:0;
 padding-left:0;
 padding-right:0;
}

Update

In your specific example (posted in comments), the issue is you’ve set ul li ul‘s position value to absolute. This takes it out of it’s parent (in regards to handling width), but can be fixed with the following CSS being added to your existing CSS:

ul li {
 position:relative;
}
ul li ul {
 width:100%;
}

While this allows you to set the submenu to be the same width as the parent, it comes with the side effect of making the menu items wrap (see sui generis menu). To overcome this, use the following CSS instead (in addition to your jsFiddle):

ul li {
 position:relative;
}
/* Due to 'min-width', this may not be compatible with all browsers */
ul li ul {
 min-width:100%;
 white-space:nowrap;
}