HTML/CSSドロップダウンメニュー

Question

5つのdivをインラインで、3つ目のメニューにはドロップダウンメニューが表示されます。 3番目のdivにカーソルを合わせると、ドロップダウンメニューが表示されますが、3番目のdivの直下ではなく、次の行のページの左側に表示されます。

HTML：

<div class="option">One</div> 
<div class="option">Two</div> 
<div class="option"> 
    <div id="container"> 
     <div class="onHover">Three 
      <div class="showMenu"> 
       <a href="#">Link 1</a></br> 
       <a href="#">Link 2</a></br> 
       <a href="#">Link 3</a></br> 
      </div> 
     </div> 
    </div> 
<div class="option">Four</div> 
<div class="option">Five</div> 

CSS：

.option { 
    display: inline; 
} 

#container { 
    display: inherit; 
} 

.onHover { 
    display: inline; 
} 

.showMenu { 
    display: none; 
    position: absolute; 
} 

.onHover:hover .showMenu { 
    display: block; 
} 

すべてのヘルプは高く評価されます。

おかげ

Answer 1

絶対的な位置に親の&を置き、上/左にメニューを配置します。また、幅を調整するか省略記号を使用する必要があります。あなたのケースでは

.option { 
 
    display: inline; 
 
} 
 

 
#container { 
 
    display: inherit; 
 
    position: relative; 
 
} 
 

 
.onHover { 
 
    display: inline; 
 
} 
 

 
.showMenu { 
 
    display: none; 
 
    position: absolute; 
 
    top:1em; 
 
    left:0px;  
 
} 
 

 
.onHover:hover .showMenu { 
 
    display: block; 
 
}

<div class="option">One</div> 
 
<div class="option">Two</div> 
 
<div class="option"> 
 
    <div id="container"> 
 
     <div class="onHover">Three 
 
      <div class="showMenu"> 
 
       <a href="#">Link 1</a></br> 
 
       <a href="#">Link 2</a></br> 
 
       <a href="#">Link 3</a></br> 
 
      </div> 
 
     </div> 
 
    </div> 
 
<div class="option">Four</div> 
 
<div class="option">Five</div>

Answer 2

まずあなたは絶対的な要素のための位置を定義する必要があります。

.showMenu { 
    display: none; 
    position: absolute; 
    top:15px; // add this 
    left:0; // add this 
} 

を、あなたは、この要素の位置をしなければならない特定の要素の左にそれを作るためには、相対的である

.onHover { 
    display: inline; 
    position:relative; // add this 
} 

デモ：https://jsfiddle.net/9dxn0cn8/

Answer 3

あなたは位置についてのリードに必要

.option { position: relative; } 

行う必要があります。絶対： https://developer.mozilla.org/en-US/docs/Web/CSS/position

また、常に良いアイデアはいくつかに見ています例： http://www.w3schools.com/css/css_dropdowns.asp

Answer 4

は、私はあなたのjsfiddleに

code 

デモを更新しています、これを試してみてください。https://jsfiddle.net/mhrjnsa1/jpwqcxtj/3/

Answer 5

.option { 
 
    display: inline; 
 
} 
 

 
#container { 
 
    display: inherit; 
 
} 
 

 
.onHover { 
 
    display: inline; 
 
} 
 

 
.showMenu { 
 
    display: none; 
 
    position: absolute; 
 
    left:70px; 
 
} 
 

 
.onHover:hover .showMenu { 
 
    display: block; 
 
}

<div class="option">One</div> 
 
<div class="option">Two</div> 
 
<div class="option"> 
 
    <div id="container"> 
 
     <div class="onHover">Three 
 
      <div class="showMenu"> 
 
       <a href="#">Link 1</a></br> 
 
       <a href="#">Link 2</a></br> 
 
       <a href="#">Link 3</a></br> 
 
      </div> 
 
     </div> 
 
    </div> 
 
<div class="option">Four</div> 
 
<div class="option">Five</div>