2016-06-16 9 views
0

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

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

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

おかげ

+1

Goは絶対位置の基準点が何であるかをよく読んで。 – CBroe

答えて

2

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

.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>

0

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

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

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

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

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

0

.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>

関連する問題