Question

I’m creating a horizontal ul navigation bar. Each li item is a different width. I want to make it so in the drop down menu the drop down "children" li items become the same length/width as the "parent" li items. Was thinking of using jQuery so it would be something like this:

jQuery("ul#menu li").width(); = jQuery("ul#menu ul li").width();

That obviously doesn’t work but it hopefully gives more of an idea of what I’m trying to do. Thanks for your help. If it can be done using only CSS even better.

Answer 1

Unless I am mistaken as to how jQuery’s width works over an array of elements, the problem with Johlin’s answer is that theres no way to know which LI’s width would be used as the new width.
CSS would mean that the widths would be static and if you need to change the LI’s content you will probably have to change the CSS too. If that’s not an issue then CSS would definitely be the way to go.
Another jQuery Approach would be:

$('ul#nav li').each(function () {
    $(this).find('li').width($(this).outerWidth(true));
});

This would set all the children LI’s widths to the parent width