Drop down menu disappearing when mousing between navigation and menu

HTML & CSS
1

Hi there,

I have the following megamenu/drop down which I am having an issue with when hover between the navigation and the actual menu; the drop down disappears. I have tried using negative margins, but no luck.

Ideally I would like to have the arrow just appearing on the black navigation.

Any ideas what I would need to do to stop the disappearing act?

This is a fiddle:

Many thanks!

2

You can’t have a gap between a hover trigger and its child dropdown or the hover is lost. Therefore you need to create the space using the trigger item instead.

You can negate the padding on the bar and place it on the list elements with these overirides.

.myNav{
  padding:0 15px!important;
}

.myNav .navbar-nav > li{
  padding-top:15px;
  padding-bottom:15px;
}
.myNav .navbar-nav > li .mega-dropdown-menu{
  margin-top:0;
}

That code should follow the original code (although you could integrate if you are careful). I did add a unique class as I hate changing any bootstrap classes.

    <!-- Navbar -->
    <nav class="navbar navbar-expand-md p-15 myNav">

I would suggest that you remove the arrow from the dropdown menu because you are hard-wiring its position at left:285px which is a magic number not useful to man or beast :slight_smile:
Instead create the arrow on the trigger item itself and place it at right:0 and bottom:0 and no magic numbers needed. :slight_smile:

3

Here’s the revised code to move the arrow.

.myNav{
  padding:0 15px!important;
}

.myNav .navbar-nav > li{
  padding-top:15px;
  padding-bottom:15px;
}
.myNav .navbar-nav > li .mega-dropdown-menu{
  margin-top:0;
  border-top:none;
}

.myNav  li.mega-dropdown .nav-link{
  position:relative;
}
.myNav  li.mega-dropdown:hover .nav-link:before {
  content: "";
  border-bottom: 15px solid #fff;
  border-right: 17px solid transparent;
  border-left: 17px solid transparent;
  position: absolute;
  bottom:-15px;;
  right:0;
  z-index: 10; }

It should then look like this.

Screen Shot 2023-07-26 at 19.04.42
Screen Shot 2023-07-26 at 19.04.421592×415 37.2 KB

2 Likes
4

Hi @PaulOB ,
Many thanks, that worked perfectly and makes sense to do it that way too.

Thanks again!

1 Like