bu div içindeki div'u gösterecek

Question

Alt menü ile dikey menü yapmak istiyorum ve alt menü ebeveyn div'in yanına gitmek zorunda.

Bunu nasıl yapacağınızı biliyorsunuzdur, google'a bir göz attım, ancak yalnızca birbirinin yanındaki 2 div gibi sonuçlar buldum. Ama buna ihtiyacım var, çocuk divun yanında olsun. Şimdilik

Kodum:

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

Artık bilgi mi istiyorsunuz, söyle lütfen. şimdilik daha fazla bilgi vermeyi bilmiyorum. CSS Code

Answer 1

ben istediğiniz yere tam olarak eleman yerleştirmek için izin verir mutlak pozisyon elemanı değişti:

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