向导航菜单添加下拉子菜单会增加容器的高度答案

【问题标题】：Adding a drop-down submenu to a navigation menu increases the height to the container向导航菜单添加下拉子菜单会增加容器的高度
【发布时间】：2015-03-11 08:43:13
【问题描述】：

我正在创建自己的 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>

【问题讨论】：

我整理了一个小提琴来尝试看看发生了什么，但这并不完全正确。如果你喜欢，修改它并发布你的版本。 jsfiddle.net/isherwood/ohbkq0px
@isherwood，您已经准确地说明了当前正在发生的事情，我想将其更改为第一张图片中的内容。我想让我的下拉菜单类似于 Bootstrap 的导航栏菜单，但我不知道该怎么做。
让我们continue this discussion in chat.

标签： css wordpress wordpress-theming

【解决方案1】：

<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>

应该是这样的

【讨论】：

戴夫，我的问题与您的回答部分相关。您回答的内容显示了如何在列表中创建列表，而我想弄清楚的是如何创建一个在单击或悬停事件期间不会增加容器高度的下拉子菜单。
它可能是你的 CSS 文件。为了简单。按照发布的代码进行操作。它不会增加高度。保持干净和简单。使用
- 创建子菜单。确保正确关闭每条线。做 div 和下拉菜单就像写 hello world 一样简单

【解决方案2】：

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

<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>

【讨论】：

@Dave 请向 OP（以及未来的 SO 访问者）解释您为什么这样做。一个解释对于做出一个好的答案和平均的答案有很长的路要走。
我给出了我在下拉菜单中使用的代码示例。代码，已在提供的链接中列出。