在它旁边的 div 中显示 div

Question

我想制作一个带有子菜单的垂直菜单，子菜单必须位于 parent div.

旁边

希望你们知道该怎么做，我查看了 google，但只发现彼此相邻的 2 个 div。但我需要 child 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%;
}

在它旁边的 div 中显示 div

show the div inside that div next to it

html

css

menu

submenu

dropdown