javascript - 下拉导航/排序 dd 与按钮对齐

Question

我在 CSS 中使用下拉菜单时遇到了一些麻烦。 我希望使下拉框与您单击以打开 dd 的按钮位于同一行。 这是 CSS 代码:

/* for all */
* {
    margin: 0;
    border: 0;
    padding: 0;
}

/* style in first box */
#a1 {
    display: block;
    background-color: lightblue;
    height: 300px;
}

h1 {
    text-align: center;
    padding: 25px;
    font-size: 6em;
    font-family: Shrikhand;
    color: white;
    text-shadow: 5px 5px #000000;
}

/* style in second box */
#a2 {
    display: block;
    background-color: lightyellow;
    height: 300px;
}

#mbar {
    width: 100%;
    height: 50px;
    background-color: gray;
}

.li {
    height: 20px;
    float: left;
    padding: 15px;
    text-decoration: none;
    list- style: none;
    background-color: lightgray;
    border-left: 1px solid black;
}

.li2 {
    height: 20px;
    padding: 15px;
    text-decoration: none;
    list-style: none;
    background-color: lightgray;
    display: none;
    width: 130.981px;
}

.dd {
    width: 130.981px;
}

    .dd:hover .li2 {
        display: block;
    }

这是 HTML 代码:

<div id="a2">
    <div id="mbar">
        <ul>
            <li class="li">index</li>
            <li class="li">gallery</li>
            <li class="li dd">
                dropdown
                <ul>
                    <li class="li2">dropdown1</li>
                    <li class="li2">dropdown2</li>
                </ul>
            </li>
            <li class="li">contact</li>
        </ul>
    </div>
</div>

这是 codepen 的链接

无论如何，如果您点击下拉按钮，您会看到下拉导航与下拉按钮不对齐。

Answer 1

您需要使用以下位置进行播放:demo

简短的回答是:

.dd {
 position: relative;
}

.dd ul {
 position: absolute;
 left: 0;
 top: 50px;
}