Html 为什么父容器会拉伸：悬停？

我正在创建一个下拉菜单，但遇到了以下问题：hover伪类。当我将鼠标悬停在菜单中的a标记上时，父容器的宽度会拉伸以满足…某些要求。发生什么事了

注意：背景色的奇怪使用只是为了让我更好地理解盒子模型是如何工作的

HTML是：

    <header>
            <h1>test <span>test</span></h1>
        <nav>
            <ul class="menu">
                <li><a href="#">Menu</a>
                    <ul class="submenu">
                        <li><a href="#one">Aaaaa Aaaaa Aaaa</a></li>
                        <li><a href="#two">Bbbbb Bbbbb Bbbbb</a></li>
                        <li><a href="#three">Ccccc Ccccc Ccccc</a></li>
                    </ul>   
                </li>
            </ul>
        </nav>
    </header>

    <section class="content" id="one">
        <h2>Aaaa</h2>
        <h3>Aaaa</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>

    <section class="content" id="two">
        <h2>Bbbb</h2>
        <h3>Bbbb</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>

    <section class="content" id="three">
        <h2>Cccc</h2>
        <h3>Cccc</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>

    <footer>
        <ul class="social">
            <li><a href="#" target="_blank"><span class="fa fa-twitter fa-2x"></span></a></li>
            <li><a href="#" target="_blank"><span class="fa fa-github fa-2x"></span></a></li>
            <li><a href="#" target="_blank"><span class="fa fa-envelope-o fa-2x"></span></a></li>
        </ul>
    </footer>

---

这里有一个演示：

将

位置：绝对

添加到

ul

元素内部

.menu li ul{
    position: absolute;
}

在正常布局中，如果子元素的高度增加，则父元素将拉伸以包含子元素。这就是上面代码中发生的情况

---

解决方案是使子元素独立于其父容器，这可以通过使用

position:absolute

css属性来实现。

将

position:absolute

添加到内部

ul

元素中

.menu li ul{
    position: absolute;
}

在正常布局中，如果子元素的高度增加，则父元素将拉伸以包含子元素。这就是上面代码中发生的情况

解决方案是使子元素独立于其父容器，这可以通过使用

position:absolute

css属性来实现

.submenu li a:hover:after {
    content: "";
    color: white;
    text-shadow: none;
    padding: 0 15px;
}

您有一些

填充设置。脱掉这个可以解决你的问题
因为在这门课上

.submenu li a:hover:after {
    content: "";
    color: white;
    text-shadow: none;
    padding: 0 15px;
}

您有一些
填充设置。脱掉这个可以解决你的问题
也许我误解了，但我认为OP指的是容器的宽度，而不是高度。不，不，这完全有效！我没有想到解决方案是将子元素带到流之外。谢谢也许我误解了，但我认为OP指的是容器的宽度，而不是高度。不，不，这完全有效！我没有想到解决方案是将子元素带到流之外。谢谢