title: How to match div heights using Javascript or Jquery?
body: <p>I am trying to make the &quot;dropdown-container&quot; match the height of the flyout menu that is shown when one of the dropdown options is hovered.  My problem with the below code is that the resize only occurs after the mouse moves again. Is it possible to force the dropdown container to resize any time the &quot;shown&quot; flyout container size changes without the mouse or hover event?   Slimmed-down HTML version shown.</p>
  <pre><code>&lt;nav&gt;
      &lt;ul class=&quot;dropdown-container&quot;&gt;
          &lt;li&gt;Top 1&lt;/li&gt;            
                  &lt;ul&gt;
                  &lt;li&gt;Drop 1&lt;/li&gt;
                      &lt;div class=&quot;flyout-container shown&quot;&gt;
                          &lt;ul&gt;
                              &lt;li&gt;Fly Out Item 1&lt;/li&gt;
                              &lt;li&gt;Fly Out Item 2&lt;/li&gt;
                              &lt;li&gt;Fly Out Item 3&lt;/li&gt;
                              &lt;li&gt;Fly Out Item 4&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;li&gt;Drop 2&lt;/li&gt;
                      &lt;div class=&quot;flyout-container&quot;&gt;
                          &lt;ul&gt;
                              &lt;li&gt;Fly Out2 Item 1&lt;/li&gt;
                              &lt;li&gt;Fly Out2 Item 2&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;li&gt;Drop 3&lt;/li&gt;
                      &lt;div class=&quot;flyout-container&quot;&gt;
                          &lt;ul&gt;
                              &lt;li&gt;Fly Out3 Item 1&lt;/li&gt;
                              &lt;li&gt;Fly Out3 Item 2&lt;/li&gt;
                              &lt;li&gt;Fly Out3 Item 3&lt;/li&gt;
                              &lt;li&gt;Fly Out3 Item 4&lt;/li&gt;
                              &lt;li&gt;Fly Out3 Item 5&lt;/li&gt;
                              &lt;li&gt;Fly Out3 Item 6&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;li&gt;Drop 4&lt;/li&gt;
                      &lt;div class=&quot;flyout-container&quot;&gt;
                          &lt;ul&gt;
                              &lt;li&gt;Fly Out4 Item 1&lt;/li&gt;
                              &lt;li&gt;Fly Out4 Item 2&lt;/li&gt;
                              &lt;li&gt;Fly Out4 Item 3&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/ul&gt;              
          &lt;li&gt;Top 2&lt;/li&gt;
          &lt;li&gt;Top 3&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>Current Jquery</p>
  <pre><code> $(document).ready(function(){
                $(&quot;.nav-menu a, .arrow&quot;).hover(function(){
                    var mainInnerHeight = $(&quot;.dropdown-container&quot;).height();
                    var flyOutHeight = $(&quot;.flyout-container.shown&quot;).height();
                  if (mainInnerHeight != flyOutHeight) {
                    $(&quot;.mainInnerHeight &quot;).height(flyOutHeight);
                  }
                });
            });
  </code></pre>