I would like to have 5 divs, inline, with the third one showing a dropdown menu beneath it when hovered on. When I hover over the third div my dropdown menu appears, but it appears to the left of the page on the next line, rather than directly beneath the third 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;
}
Any help is appreciated.
Thanks
Give relative position to the parent of absolute & then position the menu with top/left. You might also need to adjust the width or use ellipsis.
.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>
First you must define the positions for the absolute elements :
.showMenu {
display: none;
position: absolute;
top:15px; // add this
left:0; // add this
}
and to make it on the left of specific element you must make this element position is relative
.onHover {
display: inline;
position:relative; // add this
}
In your case you need to make
.option { position: relative; }
You need to reed about position:absolute: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Also always good idea is look to some examples: http://www.w3schools.com/css/css_dropdowns.asp
.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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.