title: Keep drop down menu open after hover (CSS)
body: <p>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.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;header id="header"&gt;
      &lt;div class="container"&gt;
          &lt;a href="#top-anchor"&gt;&lt;div id="logo"&gt;&lt;/div&gt;&lt;/a&gt;
          &lt;nav class="header-menu"&gt;
              &lt;a href="index.html" class="header-menu-item"&gt;ABOUT&lt;/a&gt;
                  &lt;div class="about-dropdown"&gt;
                      &lt;a href="index.html#core-services-anchor"&gt;CORE SERVICES&lt;/a&gt;
                      &lt;a href="index.html#atandl-anchor"&gt;AT&amp;amp;L&lt;/a&gt;
                      &lt;a href="index.html#hseq-anchor"&gt;HSEQ&lt;/a&gt;
                      &lt;a href="index.html#clients-anchor"&gt;CLIENTS&lt;/a&gt;
                      &lt;a href="index.html#contact-anchor"&gt;CONTACT&lt;/a&gt;
                  &lt;/div&gt;
              &lt;a href="services.html" class="header-menu-item"&gt;SERVICES&lt;/a&gt;
              &lt;a href="facilities.html" class="header-menu-item"&gt;FACILITIES&lt;/a&gt;
              &lt;a href="#map-anchor" class="header-menu-item"&gt;CONTACT&lt;/a&gt;
          &lt;/nav&gt;
          &lt;div id="hamburger"&gt;&lt;/div&gt;
          &lt;!--&lt;div id="box-shadow-menu"&gt;&lt;/div&gt;--&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/0R0BG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0R0BG.png" alt="Drop Down Menu"></a></p>