HTML / CSS Dropdown Menu

Issue

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

Solution

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>

Answered By - Ken