Keep drop down menu open after hover (CSS)

Question

I have created a horizontal menu that when you hover an item, a drop down menu appears. This is all fine. However, when you leave the menu item (to use the drop down) the drop down disappears. I understand that this is because you are no longer hovering it, but how do I solve this? Note: I don't want the drop down menu directly below it, I want a reasonable gap between the menu item and drop down (as I have it at the moment). Thanks.

HTML

<header id="header">
    <div class="container">
        <a href="#top-anchor"><div id="logo"></div></a>
        <nav class="header-menu">
            <a href="index.html" class="header-menu-item">ABOUT</a>
                <div class="about-dropdown">
                    <a href="index.html#core-services-anchor">CORE SERVICES</a>
                    <a href="index.html#atandl-anchor">AT&amp;L</a>
                    <a href="index.html#hseq-anchor">HSEQ</a>
                    <a href="index.html#clients-anchor">CLIENTS</a>
                    <a href="index.html#contact-anchor">CONTACT</a>
                </div>
            <a href="services.html" class="header-menu-item">SERVICES</a>
            <a href="facilities.html" class="header-menu-item">FACILITIES</a>
            <a href="#map-anchor" class="header-menu-item">CONTACT</a>
        </nav>
        <div id="hamburger"></div>
        <!--<div id="box-shadow-menu"></div>-->
    </div>
</header>

CSS

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  user-select: none;
  display: block;
  transition: all 0.8s;
  line-height: 100px;
  z-index: 1000;
  transform: translateX(0);
  backface-visibility: hidden;
  margin: 0;
}

header .container {
  width: 1440px;
  height: 100px;
  border-bottom: 0.75px solid rgba(255,255,255,0.1);
}

#logo {
  width: 55px;
  height: 55px;
  float: left;
  margin-top: 27px;
  background-image: url(../images/logo_white.png);
  background-size: cover;
}

nav.header-menu {
  float: right;
  height: 96px;
  vertical-align: middle;
  padding-top: 1px;
}

.header-menu-item {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  margin-left: 20px;
  text-decoration: none;
  color: #ffffff;
  line-height: 96px;
  letter-spacing: 0.5px;
  transition: 0.55s;
}

.toggle {
  opacity: 0.3;
}

.current {
  border-bottom: 2px solid #fff;
  padding-bottom: 40px;
}

.about-dropdown {
  position: absolute;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0 0 4px 3px rgba(0,0,0,0.1);
  z-index: 3000;
  margin-top: 35px;
  margin-left: -35px;
  border-radius: 3px;
  display: none;
  transition: 0.8s;
}

.about-dropdown a {
  display: block;
  text-decoration: none;
  padding: 0px 28px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  margin: 0;
  line-height: 50px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.header-menu-item:hover + .about-dropdown {
  display: block;
}

Solution 1

On the 'a' tag, add a height or padding-bottom to it on hover. Your 'a' tag might need to be positioned absolute so that its height won't affect the height of your header.

Something like the below

.about-dropdown a:hover {
    padding-bottom: 30px; /*height dependent on the gap you want to fill*/
    position: absolute; 
}

Solution 2

Unfortunately, I could not get your example to work. I did create a little demo of a CSS only solution to your problem.

It allows users to trigger the submenu by hovering the menu item. They can then keep the submenu visible by hovering it. When their cursor leaves the submenu, the submenu will be hidden after some specified delay, I chose 1 second in my demo. If users hover the submenu again within this delay, the submenu is not hidden. This allows users not only to move their cursor from the menu item to the submenu, but also makes it so that the submenu is not hidden immediately when users accidentally move their cursor to the left or right of the submenu.

.trigger {
  box-sizing: border-box;
  position: relative;
  width: 120px;
  margin: 0 0 50px;
  padding: 10px;
  background: #bada55;
  text-align: center;
}

.sub {
  box-sizing: border-box;
  position: absolute;
  top: 100px;
  left: 0;
  width: 120px;

  background: #4863a0;
  color: #fff;
  text-align: left;
  
  /* hide element for now */
  max-height: 0; overflow: hidden;
  opacity: 0;
  /* make submenu not hoverable when opacity transition finished,
   * do this instantaneously */
  transition: max-height 0s 1.5s,
              /* hide the submenu after 1 second, in 400ms */
              opacity .4s 1s;
  
  /* prevent users from showing submenu when hovering hidden element */
  pointer-events: none;
}

/* sub elements can be hovered */
.sub > * {
  pointer-events: auto;
}

/* show submenu when trigger or menu itself is hovered */
.sub:hover,
.trigger:hover .sub {
  max-height: 500px;
  opacity: 1;
  transition-delay: 0s;
}

/* give items some spacing */
.item:not(:last-child) {
  padding: 10px 10px 5px;
}
.item:last-child {
  padding: 10px;
}

<div class="trigger">HOVER ME
  <div class="sub">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
  </div>
</div>

The idea is to (ab)use CSS transitions. We hide the submenu completely and set a transition that is delayed. Then, when hovered, we set the delay to zero. What this will do is show the submenu immediately, but hide it only after some delay. This sort of works, but now the submenu can be shown when users hover the hidden element. To prevent this, we make the submenu have no height (max-height: 0) and hide its sub elements (overflow: hidden). Browsers may now still decide to trigger the hover element, so we make sure they do not by also setting pointer-events: none. All of this should also be delayed, hence the transition on max-height. Finally, we make it so that the submenu can actually be hovered when it is shown by setting pointer-events: auto for the elements in it. Unfortunately, it is not possible to transition to max-height: none, so we specify some very large value, I used 500px in the demo.