2016-04-04 8 views
0

サブメニューとサブメニューを持つ垂直メニューを作成し、親divの隣に移動する必要があります。divの隣にあるdivを表示します

あなたはそれを行う方法を知っていることを願っています。私はgoogleで一見しましたが、お互いの隣に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; 
} 

は、あなたが任意のより多くの情報が必要ですか、それを言うてください。今のところ私は何をもっと情報として与えるべきか分からない。あなたのCSSのコードで

+0

[縦メニュー](http://codepen.io/wanni/pen/zsDJb)vist this link –

答えて

0

私はあなたが欲しい正確に要素を配置することを可能にすること、絶対に位置要素を変更:

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

このコードは質問に答えるかもしれませんが、_why_および/または_how_に関する追加の文脈を に提供すると、 と答えて、その質問は長期的には の値を大幅に改善します。あなたの答えを[編集]して、説明を加えてください。 –

関連する問題