bhargav bhargav - 11 months ago 50
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>

When I MouseOver on home, the width of all
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;}

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;
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; }

.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; }

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

Answer Source

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

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



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 . That should get you going properly.