在它旁边的那个 div 中显示 div

Question

我想用子菜单制作一个垂直菜单，子菜单必须放在父 div 旁边。

希望你们知道如何做到这一点，我在谷歌上进行了查看，但只找到了类似 2 个 div 彼此相邻的结果。但我需要子 div 必须得到它的下一个。

我现在的代码：

HTML

<div id="menuCont">
    <div class="menuItem">
        Applicatie Ontwikkeling
        <div class="subMenuCont">
            <div class="subMenuItem">HTML</div>
            <div class="subMenuItem">CSS</div>
            <div class="subMenuItem">jQuery</div>
        </div>
    </div>
    <div class="menuItem">
        Netwerk Beheer
    </div>
    <div class="menuItem">
        Server Beheer
    </div>
</div>

CSS

#menuCont {
    width: 17.5%;
    text-align: center;
}

.menuItem {
    width: 100%;
    padding: 1em;
    background-color: #ffffff;
    color: #000000;
    font-family: Lato;
    font-size: 125%;
    border: 1px solid #7266ff;
    border-bottom: 0;
    cursor: pointer;
}

.menuItem:first-child {
    border-top-left-radius: 1.5em;
}

.menuItem:last-child {
    border-bottom: 1px solid #7266ff;
    border-bottom-right-radius: 1.5em;
}

.menuItem:hover {
    background-color: #7266ff;
    color: white;
}

.subMenuCont {
    /*display: none;*/
    position: relative;
    /*left: 100%;*/
    /*width: 90%;*/
}

.subMenuItem {
    border: 1px solid #7266ff;
    border-bottom: 0;
}

.subMenuItem:last-child {
    border-bottom: 1px solid #7266ff;
}

您需要更多信息吗，请说出来。现在我不知道该提供什么作为更多信息。

Answer 1

在您的 CSS 代码中，我将位置元素更改为绝对，这样您就可以将元素准确地放置在您想要的位置：

.subMenuCont {
    position: absolute;
    top:0;
    left: 17.5%;
    width: 17.5%;
}