Slide down navigation not working correctly

Hey everyone,

So for some reason I’m having trouble getting my main set of list items to slide down when I hover over a list item that brings up a nested set of list items. So far, I’ve got it to where when you hover over a main list item, the sub list items show up, but they show up over the other main list items. Is there a way where I can have it to where when I hover over one list item that brings up the sub list items, that the remaining list items slide down? (I’m sorry if that’s a bit confusing.) Here’s me codepen link to show what I’ve got so far. Any advice or help would be greatly appreciated! Thank You!

https://codepen.io/WebDevGuy/pen/VmQdWg

Hi,
Yes, you can do that by placing the sub-list back into the normal page flow. That is, change it’s position back to static.

.dropdown:hover > .drop-nav{
      position: static; /*added this to restore page flow*/
      visibility: visible; /* shows sub-menu */
      opacity: 1;
      z-index: 1;
      transform: translateY(0%);
      transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}

z-index should not be an issue as position static should bring it back from z-index: -1; which is on .drop-nav

1 Like

Thank you for pointing out the positioning. That made everything slide down. However, I can’t seem to figure out how to get rid the extra space at the top of the secondary list items, when you hover over the primary ones. I’ve tried targeting those list items and adding a 0 margin-top and nothing works. What would you suggest?

Hi,
Remove the top:50px; rule, that is the culprit. When you use relative positioning the original space is preserved and the element is only moved visually.

.overlay-content li {
      position: relative;
      /*top: 50px;   remove this rule*/
      width: 100%;
      text-align: center;
      margin-top: 0px;
}

To take it’s place without effecting all other li’s add in this new rule…


 ul.parent {margin-top:60px;}

You may also want to remove (or adjust) the default margin & padding on the sub ul. Add them in here…


.drop-nav {

     margin:0;
     padding:0;
}
2 Likes

That fixed my issues :slight_smile: Thank you for all your patience and help!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.