bhargav bhargav - 2 months ago 12
jQuery Question

how to set longest li element's width as width of all li elements that belong to single parent ul

hi i have an unordered list like this

<ul class="dropdown">Home
<li>kithchen </li>
<li>Meeting room</li>
<li>garden</li>
</ul>


When I MouseOver on home, the width of all
<li>
elements coming under home shuld be the width of longest element. For example here 'meeting room' is longest.

I need to do this using jquery

Thanks in advance

the css file i have wriiten for the menu is like this
ul{ list-style: none;}

/*
LEVEL ONE
*/
ul.dropdown {text-align:left; position:relative;z-index:1; width:1000px;}
ul.dropdown li { font-weight: bold;border:1px solid green; float:left;color:white;background: black;width:100% }
ul.dropdown a:hover { color: white; }
ul.dropdown a:active { color: white; }
ul.dropdown li a { text-align:left; display:inline; padding:4px;
color:white;}
ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */

ul.dropdown li:hover { background: orange; color: white; position:relative; }

* { margin: 0; padding: 0; }

/*
LEVEL TWO
*/
.dropdown ul { width: 220px; visibility:hidden; position:absolute; left: 0; }
ul.dropdown ul li
{ font-weight: normal; background:black; color: white; float:left; }

/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a {color:White; border-right: none; width:180px; display: inline-block; }

/*
LEVEL THREE
*/
ul.dropdown ul ul { left: 100px; top: 0; }
ul.dropdown li:hover > ul { visibility: visible;}

Answer

is there a reason why you don't want to use

ul.dropdown li { display: block; width: 100%; }

??

edit:

thanks for the jsfiddle link, but the demo you've set up doesn't work at the present time.

I suggest you use one of the many free css dropdown menu generators, at least as a base, to see how they work. One I've used before and can recommend is http://purecssmenu.com/ . That should get you going properly.

Comments