Question

I just can’t figure out or find any solution here, so I chose to ask a question.
I have plain css/html drop-down menu code, that works and looks fine, but when I add jquery, the problem begins.
As you can see in example below I am trying to add biggest value of same tree (ul.children li) elements Width as the width of all elements within this tree.
Well, the attribute is added, but the value is 0px and remains even if i try to globalize the element range changing .children to all ul.
What is cousing the code to output 0px instead of needed biggest width value of element.
Thanks in advance!

Here’s the plain HTML code:

<ul>

   <li class="page_item page-item-2"><a href="">Sākumlapa</a></li>

   <li class="page_item page-item-4"><a href="">Par mums</a>

      <ul class="children">

        <li class="page_item page-item-6"><a href="">Galerija</a></li>

      </ul>

   </li>

</ul>

And here is the jQuery code:

                       $(document).ready(function() {

                            var maxWidth = 0;

                            var elemWidth = 0;


                            $('.children li').each(function() {

                                elemWidth = parseInt($(this).css('width'));

                                if (parseInt($(this).css('width')) > maxWidth) {

                                    maxWidth = elemWidth;

                                }

                             });


                            $('.children li').each(function() {

                                  $(this).css('width', maxWidth + "px");

                            });

                       });

And after this is executed you can see that there is style attribute added for the children.li element, but it contains 0px not the biggest width of element.
Here is the Copy&Paste code from browser.

<ul>

   <li class="page_item page-item-2"><a href="http://localhost/wordpress/?page_id=2">Sākumlapa</a></li>

   <li class="page_item page-item-4"><a href="http://localhost/wordpress/?page_id=4">Par mums</a>

      <ul class="children">

        <li class="page_item page-item-6" style="width: 0px;"><a href="http://localhost/wordpress/?page_id=6">Galerija</a></li>

      </ul>

   </li>

</ul>

Answer 1

I added this line after document is loaded and before the each function:

    $('.navigation li').hover(function(){
       // here goes the whole code above
    });

This fixed my issue!