Question

我正在创建一个下拉菜单，并且遇到了以下问题：hover pseudoclass。当我将鼠标悬停在菜单中的标签上时，父容器的宽度会延伸以满足......某些东西。发生了什么事？

注意：背景颜色的奇怪使用只是为了让自己更好地理解盒子模型的工作原理。

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>

CSS是：

nav {
    position: inherit;
    left: 30px;
    top: 78px;
}
.menu {
    position: inherit;
    background-color: yellow;
    width: 90%;
}
.menu > li {
    float: left;
    list-style: none;
    display: inline-block;
}
.menu li a {
    display: inherit;
    padding: 10px;
}
.menu li a:hover {
    background-color: black;
    color: white;
    text-shadow: none;
}
ul.submenu {
    display: none; 
}
li:hover > ul {
    position: inherit;
    display: block;
    background-color: blue;
}
.submenu li {
    padding: 0;
    margin: 0;
    width: 100%;
}
.submenu li a {
    display: inherit;
    padding: 10px;
}
.submenu li a:hover:after {
    content: "";
    color: white;
    text-shadow: none;
    padding: 0 15px;
}

以下是演示：http://jsfiddle.net/ur3dettv/

Answer 1

将position: absolute添加到内部ul元素。

.menu li ul{
    position: absolute;
}

<强> Working Fiddle

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

解决方案是使子元素独立于其父容器，这可以通过使用position: absolute css属性来完成。

Answer 2

因为在这个课上

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

你有一些padding设置。解决此问题可以解决您的问题。的 DEMO

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

2 个答案: