CODEWITHSUNDEEP
jquerycsslistdrop-down-menu
user1097843
user1097843

Reputation: 3

Making different li (parent and child) the same width

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.

Upvotes: 0

Views: 991

Answers (4)

vmex151
vmex151

Reputation: 180

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

Upvotes: 0

hereandnow78
hereandnow78

Reputation: 14434

i think there is a problem if one of your nested items (dropdown children) is larger than your main-item! if thats the case your children should specify the size of your parent li!

or was that exactly what you where asking?

Upvotes: 1

Chris Fletcher
Chris Fletcher

Reputation: 2387

jQuery seems like a poor solution.

I'd add a class to each parent li.

<li class="home"><!--nest ul goes here--></li>
<li class="about"><!--nest ul goes here--></li>
<li class="products"><!--nest ul goes here--></li>

Then you can target each one and it's children specifically:

.home, .home ul li { width: 150px; }
.about, .about ul li { width: 220px; }
.products, .products ul li { width: 100px; }

Upvotes: 2

Johan Lindskogen
Johan Lindskogen

Reputation: 1306

The syntax is:

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

This should work!

Upvotes: 0

Related Questions