Question

I am trying to find the total outer width of all “li” elements in a menu but my code don’t seem to work so I am wondering is it because the parent UL element is set to display none?

If so how to get around this?

<ul>
<li>menu item 1</li>
<li>menu item 2<ul>
     <li>sub menu item 1</li>
     <li>sub menu item 2</li>
</ul></li>
</ul>

So obviously my sub menu item is set to display none until it is hovered over.

And my JS is like this

var totalWidth = 0;
jQuery("ul ul li").each(function() {
     totalWidth += jQuery(this).outerWidth();
});
alert(totalWidth);

When I alert this, it is always zero…

Answer 1

Anyway you can hack your way out of it…:

var totalWidth = 0;
jQuery("ul ul").show();
jQuery("ul ul li").each(function() {
     totalWidth += jQuery(this).outerWidth();
});
jQuery("ul ul").hide();
alert(totalWidth);

Not sure you have hidden the ul ul selector but see the system?

Some CSS hacks maybe:

http://jsfiddle.net/ywtBH/

http://jsfiddle.net/ywtBH/2/

http://jsfiddle.net/ywtBH/5/

After chat:

The solution was to put white-space:none; and… See: http://jsfiddle.net/dGhAp/2/

With float:left;

--- PARENT ---------------------
|------------------------       |
|   elem1   |   elem2   |       |
|           |           |       |
|           |           |       |
-------------------------
    elem3   |
            |
            |
-------------

With display:inline-block;

--- PARENT ---------------------
|-------------------------------|---
|   elem1   |   elem2   |elem3  |   |
|           |           |       |   |
|           |           |       |   |
------------------------------------