title: Why is this dropdown not working in UIKit?
body: <p>I am using UIKit to try to display an HTML list as a navbar. The navbar has several elements, some of which have nested children. I am trying to check that the Wordpress theme I'm writing supports the Wordpress unit tests.</p>
  
  <p>See the GIF below:</p>
  
  <p><img src="https://i.stack.imgur.com/ViAOZ.gif" alt="Navbar GIF"></p>
  
  <p>As you can see, when I hover over Level 1, the dropdown correctly appears. If I move the cursor over Level 2 the dropdown closes instead of showing the contents of the Level 2 item. If I quickly move the cursor past the Level 2 item and onto either the Level 2A or Level 2B items (which do not have associated dropdown) the dropdown stays open.</p>
  
  <p>Here is the HTML for the Level 1 <code>li</code> item:</p>
  
  <pre><code>&lt;li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false"&gt;
  &lt;a href=""&gt;Level 1 &lt;i class="uk-icon-caret-down"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;div class="uk-dropdown uk-dropdown-navbar" style=""&gt;
      &lt;ul class="uk-nav uk-nav-dropdown"&gt;
          &lt;li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false"&gt;
              &lt;a href=""&gt;Level 2 &lt;i class="uk-icon-caret-down"&gt;&lt;/i&gt;&lt;/a&gt;
              &lt;div class="uk-dropdown uk-dropdown-navbar" style=""&gt;
                  &lt;ul class="uk-nav uk-nav-dropdown"&gt;
                      &lt;li&gt;&lt;a href="http://localhost/level-1/level-2/level-3/"&gt;Level 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://localhost/level-1/level-2/level-3a/"&gt;Level 3a&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://localhost/level-1/level-2/level-3b/"&gt;Level 3b&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="http://localhost/level-1/level-2a/"&gt;Level 2a&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://localhost/level-1/level-2b/"&gt;Level 2b&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></li></p>
  
  <p>The full navbar HTML is here (in case the problem is not with the Level 1 <code>li</code>):</p>
  
  <pre><code>&lt;ul class="uk-navbar-nav"&gt;
  &lt;li&gt;&lt;a href="http://wpthemetestdata.wordpress.com/"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://localhost/blog/"&gt;Blog&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://localhost/front-page/"&gt;Front Page&lt;/a&gt;&lt;/li&gt;
  &lt;li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false"&gt;
      &lt;a href=""&gt;About The Tests &lt;i class="uk-icon-caret-down"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;div class="uk-dropdown uk-dropdown-navbar" style=""&gt;
              &lt;ul class="uk-nav uk-nav-dropdown"&gt;
                  &lt;li&gt;&lt;a href="http://localhost/about/page-image-alignment/"&gt;Page Image Alignment&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://localhost/about/page-markup-and-formatting/"&gt;Page Markup And Formatting&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://localhost/about/clearing-floats/"&gt;Clearing Floats&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://localhost/about/page-with-comments/"&gt;Page with comments&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://localhost/about/page-with-comments-disabled/"&gt;Page with comments disabled&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false"&gt;
          &lt;a href=""&gt;Level 1 &lt;i class="uk-icon-caret-down"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;div class="uk-dropdown uk-dropdown-navbar" style=""&gt;
              &lt;ul class="uk-nav uk-nav-dropdown"&gt;
                  &lt;li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false"&gt;
                      &lt;a href=""&gt;Level 2 &lt;i class="uk-icon-caret-down"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;div class="uk-dropdown uk-dropdown-navbar" style=""&gt;
                          &lt;ul class="uk-nav uk-nav-dropdown"&gt;
                              &lt;li&gt;&lt;a href="http://localhost/level-1/level-2/level-3/"&gt;Level 3&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="http://localhost/level-1/level-2/level-3a/"&gt;Level 3a&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="http://localhost/level-1/level-2/level-3b/"&gt;Level 3b&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://localhost/level-1/level-2a/"&gt;Level 2a&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="http://localhost/level-1/level-2b/"&gt;Level 2b&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;li&gt;&lt;a href="http://localhost/lorem-ipsum/"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://localhost/page-a/"&gt;Page A&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="http://localhost/page-b/"&gt;Page B&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Is there an error in the HTML causing this?</p>