HTML/CSS 下拉菜单

Question

我想要 5 个 div，内联，第三个 div 在悬停时显示在其下方的下拉菜单。当我将鼠标悬停在第三个 div 上时，我的下拉菜单出现了，但它出现在页面左侧的下一行，而不是第三个 div 的正下方。

HTML:

<div class="option">One</div>
<div class="option">Two</div>
<div class="option">
    <div id="container">
        <div class="onHover">Three
            <div class="showMenu">
                <a href="#">Link 1</a></br>
                <a href="#">Link 2</a></br>
                <a href="#">Link 3</a></br>
            </div>
        </div>
    </div>
<div class="option">Four</div>
<div class="option">Five</div>

CSS:

.option {
    display: inline;
}

#container {
    display: inherit;
}

.onHover {
    display: inline;
}

.showMenu {
    display: none;
    position: absolute;
}

.onHover:hover .showMenu {
    display: block;
}

感谢任何帮助。

谢谢

Answer 1

将相对位置赋予绝对父级，然后将菜单定位在顶部/左侧。您可能还需要调整宽度或使用省略号。

.option {
    display: inline;
}

#container {
    display: inherit;
    position: relative;
}

.onHover {
    display: inline;
}

.showMenu {
    display: none;
    position: absolute;
    top:1em;
    left:0px;    
}

.onHover:hover .showMenu {
    display: block;
}

<div class="option">One</div>
<div class="option">Two</div>
<div class="option">
    <div id="container">
        <div class="onHover">Three
            <div class="showMenu">
                <a href="#">Link 1</a></br>
                <a href="#">Link 2</a></br>
                <a href="#">Link 3</a></br>
            </div>
        </div>
    </div>
<div class="option">Four</div>
<div class="option">Five</div>