html - Make absolute element sit directly below relative element -

i'm building dropdown nav bar activates upon hover.

i dropdown nav display directly under portfolio link when hovered over, it's displaying on right.

styling , not going come later, wanted bit sorted before carrying on.

<div class="twelve columns">           <ul class="navigation 6 columns offset-by-three">               <li><a href="#">home</a></li>               <li><a href="#" class="submenu">portfolio</a></li>                 <div class="sub-hover">                     <a href="">photos</a>                     <a href="">physical</a>                     <a href="">write</a>                     <a href="">studies</a>                 </div>               <li><a href="#">about</a></li>               <li><a href="#">contact</a></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 {      display: block;  }    .submenu:hover .sub-hover {      display: block;  }

there couple things need change:

1. you need place .sub-hover inside of portfolio <li> instead of outside of it.
2. display .sub-hover div when .submenu hovered. can accomplish using css sibling selector ~.
3. display .sub-hover div when div hovered.
4. in .sub-hover div, use padding instead of margin div won't disappear when move mouse title 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 {      display: block;  }    .submenu:hover .sub-hover {      display: block;  }

<div class="twelve columns">            <ul class="navigation 6 columns offset-by-three">                <li><a href="#">home</a></li>                <li><a href="#" class="submenu">portfolio</a>                    <div class="sub-hover">                      <a href="">photos</a>                      <a href="">physical</a>                      <a href="">write</a>                      <a href="">studies</a>                    </div>                </li>                <li><a href="#">about</a></li>                <li><a href="#">contact</a></li>            </ul>        </div>