html - このドロップダウンが UIKit で機能しないのはなぜですか?

Question

UIKit を使用して、HTML リストをナビゲーション バーとして表示しようとしています。navbar にはいくつかの要素があり、その中にはネストされた子を持つものもあります。私が書いているWordpressのテーマがWordpressの単体テストをサポートしていることを確認しようとしています。

以下の GIF を参照してください。

ご覧のとおり、レベル 1 にカーソルを合わせると、ドロップダウンが正しく表示されます。カーソルをレベル 2 に移動すると、レベル 2 アイテムの内容が表示される代わりに、ドロップダウンが閉じます。カーソルをレベル 2 アイテムを越えてレベル 2A またはレベル 2B アイテム (関連するドロップダウンがない) にすばやく移動すると、ドロップダウンは開いたままになります。

liレベル 1アイテムの HTML は次のとおりです。

<li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false">
<a href="">Level 1 <i class="uk-icon-caret-down"></i></a>
<div class="uk-dropdown uk-dropdown-navbar" style="">
    <ul class="uk-nav uk-nav-dropdown">
        <li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false">
            <a href="">Level 2 <i class="uk-icon-caret-down"></i></a>
            <div class="uk-dropdown uk-dropdown-navbar" style="">
                <ul class="uk-nav uk-nav-dropdown">
                    <li><a href="http://localhost/level-1/level-2/level-3/">Level 3</a></li>
                    <li><a href="http://localhost/level-1/level-2/level-3a/">Level 3a</a></li>
                    <li><a href="http://localhost/level-1/level-2/level-3b/">Level 3b</a></li>
                </ul>
            </div>
        </li>
        <li><a href="http://localhost/level-1/level-2a/">Level 2a</a></li>
        <li><a href="http://localhost/level-1/level-2b/">Level 2b</a></li>
    </ul>
</div>

完全な navbar HTML はここにあります (問題が Level 1 にない場合li):

<ul class="uk-navbar-nav">
<li><a href="http://wpthemetestdata.wordpress.com/">Home</a></li>
<li><a href="http://localhost/blog/">Blog</a></li>
<li><a href="http://localhost/front-page/">Front Page</a></li>
<li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false">
    <a href="">About The Tests <i class="uk-icon-caret-down"></i></a>
        <div class="uk-dropdown uk-dropdown-navbar" style="">
            <ul class="uk-nav uk-nav-dropdown">
                <li><a href="http://localhost/about/page-image-alignment/">Page Image Alignment</a></li>
                <li><a href="http://localhost/about/page-markup-and-formatting/">Page Markup And Formatting</a></li>
                <li><a href="http://localhost/about/clearing-floats/">Clearing Floats</a></li>
                <li><a href="http://localhost/about/page-with-comments/">Page with comments</a></li>
                <li><a href="http://localhost/about/page-with-comments-disabled/">Page with comments disabled</a></li>
            </ul>
        </div>
    </li>
    <li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false">
        <a href="">Level 1 <i class="uk-icon-caret-down"></i></a>
        <div class="uk-dropdown uk-dropdown-navbar" style="">
            <ul class="uk-nav uk-nav-dropdown">
                <li class="uk-parent" data-uk-dropdown="" aria-haspopup="true" aria-expanded="false">
                    <a href="">Level 2 <i class="uk-icon-caret-down"></i></a>
                    <div class="uk-dropdown uk-dropdown-navbar" style="">
                        <ul class="uk-nav uk-nav-dropdown">
                            <li><a href="http://localhost/level-1/level-2/level-3/">Level 3</a></li>
                            <li><a href="http://localhost/level-1/level-2/level-3a/">Level 3a</a></li>
                            <li><a href="http://localhost/level-1/level-2/level-3b/">Level 3b</a></li>
                        </ul>
                    </div>
                </li>
                <li><a href="http://localhost/level-1/level-2a/">Level 2a</a></li>
                <li><a href="http://localhost/level-1/level-2b/">Level 2b</a></li>
            </ul>
        </div>
    </li>
<li><a href="http://localhost/lorem-ipsum/">Lorem Ipsum</a></li>
<li><a href="http://localhost/page-a/">Page A</a></li>
<li><a href="http://localhost/page-b/">Page B</a></li>
</ul>

これを引き起こしている HTML にエラーはありますか?