Make absolute element sit directly below relative element - html

Question

I'm currently building a dropdown nav bar that activates upon hover.
I would like the dropdown nav to display directly under the PORTFOLIO link when hovered over, it's currently displaying over to the right.
Styling and what not is going to come later, I wanted this bit sorted before carrying on.
<div class="twelve columns">
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO</li>
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
}
.navigation li {
display: inline-block;
padding: 10px 20px;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
display:;
margin-top: 25px;
padding: 5px 10px;
}
.sub-hover a {
display: block;
}
.submenu:hover .sub-hover {
display: block;
}

Answer 1

There are a couple things you need to change:
You need to place your .sub-hover inside of the portfolio <li> instead of outside of it.
Display your .sub-hover div when .submenu is hovered. You can accomplish this by using the CSS sibling selector ~.
Display your .sub-hover div when the div itself is hovered.
In your .sub-hover div, use padding instead of margin so the div won't disappear when you move your mouse from the title to the dropdown.
CSS
.sub-hover {
padding-top: 25px;
}
.submenu:hover ~ .sub-hover {
display: block;
}
.sub-hover:hover {
display: block;
}
.navigation {
display: flex;
flex-direction: row;
justify-content: center;
}
.navigation li {
display: inline-block;
padding: 10px 20px;
}
.submenu {
position: relative
}
.sub-hover {
position: absolute;
display:;
padding-top: 25px;
padding: 5px 10px;
display: none;
}
.submenu:hover ~ .sub-hover {
display: block;
}
.sub-hover:hover {
display: block;
}
.sub-hover a {
display: block;
}
.submenu:hover .sub-hover {
display: block;
}
<div class="twelve columns">
<ul class="navigation six columns offset-by-three">
<li>HOME</li>
<li>PORTFOLIO
<div class="sub-hover">
Photos
Physical
Write
Studies
</div>
</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>

Answer 2

This will take a little tweaking of your markup, but a common way to deal with this boils down to
<ul class="navigation">
<li>
<a>main menu item 1</a>
<li>
<a>main menu item 2</a>
<ul>
<li>
<a>drop down 1 under menu item 2</a>
</li>
<li>
<a>drop down 2 under menu item 2</a>
</li>
</ul>
<li>
</ul>
and
.navigation {
list-style: none
}
.navigation li {
display: inline-block;
position: relative;// required for positioning the dropdown relative to the parent menu item
}
.navigation li li {
display: block
}
.navigation ul {
display: none;
position: absolute;
top: 100%;// makes the dropdown "hang" from the menu
left: 0;// tweak as needed
width: 100px;//some value required here
}
.navigation li:hover ul {
display: block
}
The keys to your question are putting the dropdown inside the main menu item, making the main menu item position: relative, and making the dropdown position: absolute; top: 100%; width: something and left: something or right: something