Выпадающее меню HTML/CSS

Question

Я хотел бы иметь 5 divs, inline, с третьим, показывающим выпадающее меню под ним при наведении курсора. Когда я наводил верх над третьим div, появляется раскрывающееся меню, но оно появляется слева от страницы на следующей строке, а не прямо под третьим 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

Давать r исходное положение родителя абсолютного &, затем расположите меню с верхним/левым. Вам также может потребоваться настроить ширину или использовать многоточие.

.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 

Demo: 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>