将下拉子菜单添加到导航菜单会增加容器的高度

Question

我正在创建自己的wordpress主题和 我从this链接获取了帮助，以创建一个下拉子菜单。

问题是当鼠标悬停在导航菜单上时，我希望子菜单看起来像这样 -

它看起来像这样 -

在盘旋后它看起来像这样 -

如何纠正这一问题，使顶级菜单的高度保持不变，子菜单显示为第一张图像中的子菜单？

代码如下 - CSS：

.site-nav ul ul 
{
    display: none;
}

.site-nav ul li:hover > ul {
    display: block;
}

Wordpress HTML + PHP代码

       <nav class="site-nav">
            <?php 
                $args=array(
                    'theme_location'  => 'primary',
                    'menu'            => '',
                    'container'       => 'div',
                    'container_class' => '',
                    'container_id'    => '',
                    'menu_class'      => 'menu',
                    'menu_id'         => '',
                    'echo'            => true,
                    'fallback_cb'     => 'wp_page_menu',
                    'before'          => '',
                    'after'           => '',
                    'link_before'     => '',
                    'link_after'      => '',
                    'items_wrap'      => my_nav_wrap(),
                    'depth'           => 2,
                    'walker'          => ''
                );
            ?>
            <?php wp_nav_menu($args); ?>
        </nav>

这是呈现的HTML代码：

<nav class="site-nav">
    <div class="menu-cf-menu-test-container">
        <ul id="menu-cf-menu-test" class="menu">
            <li id="menu-item-1561" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1553 current_page_item menu-item-1561">
                <a href="http://localhost/wordpress/?page_id=1553">Home</a>
            </li>
            <li id="menu-item-1243" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1243">
                <a href="http://localhost/wordpress/?page_id=1220">About</a>
            </li>
            <li id="menu-item-1535" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1535">
                <a href="http://localhost/wordpress/?page_id=1214">Program Implementation</a>
            </li>
            <li id="menu-item-1283" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1283">
                <a href="#">Register</a>
            </li>
            <li id="menu-item-1536" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1536">
                <a href="http://localhost/wordpress/?page_id=1371">Login</a>
            </li>
            <li class="menu-item-has-children">
                <a href="/profile">Hi sid!</a>
                <ul class="sub-menu">
                    <li>
                        <a href="/profile">View Profile</a>
                    </li>
                    <li>
                        <a href="/logout">Logout</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>                
</nav>

Answer 1

这与我在标签中使用的代码很接近：

<ul id="nav">
    <li><a href="/index.php">Home</a></li>
    <li><a href="/item1/">Item 1</a></li>
    <li><a href="/item2/">Item 2</a></li>
    <li><a href="/item3/">Item 3</a></li>
    <li><a href="/item4/">Item 4</a></li>

Answer 2

＆＃13;

＆＃13;

<nav class="site-nav">
    <div class="menu-cf-menu-test-container">
        <ul ><a href="http://localhost/wordpress/?page_id=1553">Home</a>
            </li>
            <li><a href="http://localhost/wordpress/?page_id=1220">About</a>
            </li>
            <li >
                <a href="http://localhost/wordpress/?page_id=1214">Program Implementation</a>
            </li>
            <li i>
                <a href="#">Register</a>
            </li>
            <li >
                <a href="http://localhost/wordpress/?page_id=1371">Login</a>
            </li>
            <li>
                <a href="/profile">Hi sid!</a>
                <ul class="sub-menu">
                    <li>
                        <a href="/profile">View Profile</a>
                    </li>
                    <li>
                        <a href="/logout">Logout</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>                
</nav>

＆＃13;

＆＃13;

＆＃13;

它的外观应该是