zeigen Sie das Div in diesem Div daneben

Question

Ich möchte ein vertikales Menü mit Submenüs und das Untermenü müssen neben dem Elternteil Div gehen.

Hoffen Sie Jungs wissen, wie man das macht, schaute ich auf google aber fand nur Ergebnisse wie 2 divs nebeneinander. Aber ich brauche, dass das Kind div als nächstes dran muss.

Mein Code für jetzt:

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

Haben Sie weitere Informationen benötigen, bitte sagen. für jetzt weiß ich nicht, was ich als mehr Info geben soll.

Answer 1

in Ihrem CSS-Code geändert ich die Position Element absolut, dass Sie das Element genau platzieren können, wo Sie wollen:

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