Responsive Navigation dropdown

HTML & CSS
1

I was working with this responsive. I am trying to add a dropdown to the services section that would display three more services. But I am a bit stuck. The items just keeps stacking on top of each other and not dropping down.

2

If I understand correctly then you would need to add the following basic code.

.nav-item{
  position:relative;
}
.nav-menu .nav-menu{
  position:absolute;
  top:-100%;
  left:0;
  display:block;
  white-space:nowrap;
  transition:1s ease;
  pointer-events:none;
  opacity:0;
}
.nav-item:hover .nav-menu{
  top:100%;
  opacity:1;
  pointer-events:initial;
}

You may want to put that inside your larger screen media query otherwise it will affect small screen.

4

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