Question

.menu li {
    float: left;
    color: #fff;
    font-weight: bold;
}
.menu li a {
    display: block;
    height: 20px;
    min-width: 110px;
    text-decoration: none;
    border-radius: 3px;
    padding: 4px;
    padding-left: 6px;
    padding-right: 6px;
    margin-left: 25px;
    margin-right: 25px;
}
.menu li ul {
    display: none;
    max-width: 110px;
    padding: 4px;
    margin-left: 25px;
    margin-right: 25px;
    list-style: none !important;
    list-style-image: none !important;
}
.menu li a:hover {
    background-color: rgba(0, 88, 153, 0.8);
}
.menu li:hover ul {
    display: block;
    padding: 0;
    margin-top: 9px;
    list-style: none !important;
    list-style-image: none !important;
}
.menu li:hover ul a {
    display: block;
    background-color: rgba(0, 88, 153, 0.8);
    width: 110px;
    border-radius: 3px;
    padding-top: 6px;
    padding: 4px;
    padding-left: 6px;
    padding-right: 6px;
    text-align: left;
    margin: 0;
    margin-bottom: 5px;

上面是我目前正在使用的代码，我希望UL能够超越一切，我试着修复了＃39;和绝对的＆＃39;然后它消失了，我试图改变边缘左边的＆＃39;继承＆＃39;但那也没有用。我希望UL浮动在父LI之下。

JSFiddle

Answer 1

首先定位父li亲戚

后，您需要绝对定位子菜单

HTML（已更正）（感谢@Malcom的容器

<div class="container">
<div class="menu">
    <ul>
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">Sub</a>

            <ul>
                <li><a href="#">Sub1</a>

                </li>
                <li><a href="#">Sub2</a>

                </li>
                <li><a href="#">Sub3</a>

                </li>
            </ul>
        </li>
    </ul>
</div>
</div>
As you can see, this text moves when you hover 'Sub'

CSS（剪裁到相关部分）

.menu li {
    float: left;
    color: #fff;
    font-weight: bold;
    position: relative; /* this */
}

.menu li ul {
    position: absolute; /* this */
    display: none;
    max-width: 110px;
    padding: 4px;
    margin-left: 25px;
    margin-right: 25px;
    list-style: none !important;

list-style-image: none !important;

}

JSfiddle Demo

“浮动”UL的问题

1 个答案: