show the div inside that div next to it

Question

I want to make a vertical menu with submenu's and the submenu have to go next to the parent div.

Hope you guys know how to do that, I did a look on google but only found results like 2 divs next to eachother. But I need that the child div have to get next of it.

My code for now:

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;
}

Do you need any more info, please say it. for now I don't know what to give as more info.

Answer 1

In your CSS Code I changed the position element to absolute, that allows you to place the element exactly where you want:

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