title: Absolute positioned mega menu disappears when position relative nav link is not hovered over
body: <p>I have a header where each nav link drops down a mega menu, but since the mega menu is absolutely positioned, its "on top" of the relatively positioned nav.  So when I try to move onto the mega menu, it disappears, along with the nav link's on-hover border-bottom.  </p>
  
  <p>Usually my issue is just padding, but it does not seem to be the case this time. I am trying to keep my border-bottom feature along with being able to reach my mega menu. </p>
  
  <p>The result is: (click to open the snippet)<br></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#navigation {
          padding-top: 16px;
          padding-bottom: 5px;
          border-bottom: 1px solid #979797;
          background-color: #FFFFFF;
      }
      .hello&gt;li {
          padding: 0px 15px 0px 15px;
      }
      .hello&gt;li&gt;a {
          color: #4A4A4A;
          padding: 20px 15px 46px;
          margin-bottom: 0px;
      }
      .hello&gt;li:first-child a:hover {
          border-bottom: none;
          padding-bottom: 0px;
          text-decoration: none;
          margin-bottom: 0px;
      }
      .hello&gt;li:first-child {
          padding-left: 0px;
      }
      .hello&gt;li:last-child {
          padding-right: 0px;
      }
      .hello&gt;li&gt;a:hover, .hello&gt;li&gt;a:visited, .hello&gt;li&gt;a:focus, .hello&gt;li&gt;a:active {
          text-decoration: none;
          color: #4A4A4A;
          border-bottom: 4px solid #8DB9CA;
          padding-bottom: 33px;
      }
      .hello&gt;li&gt;a:hover + .dropdown-menu {
          display: block;
          padding-top: 30px;
      }
      #navigation ul.hello .dropdown-menu .nav-drop-list-block li {
          display: block;
          text-align: left;
      }
      #navigation ul.hello .dropdown-menu .nav-drop-list-block p {
          display: block;
          text-align: left;
      }
      .dropdown-menu { 
          position: absolute; 
          width: 100%; 
          text-align: center; 
          top: 70px;
          border-radius: 0px;
          margin-top: 0px;
          padding-top: 30px;
      }
      .dropdown-menu&gt;li&gt;a {
          color: #4A4A4A;
      }
      .dropdown{ 
          position: static;
      }
      .dropdown-container {
          position: static;
      }
      #navigation ul.hello li {
          display: inline-block;
      } 
      #search-desk-block {
          display: block;
          float: right;
          position: relative;
          top: 20px;
      }
      #search-desk-block {
          position: relative;
      }
      #search-desk-block input {
          width: 250px;
          border-color: #63666A;
          border-radius: 6px;
      }
      .search-desk-icon {
          position: absolute;
          right: 9px;
          bottom: 20px;
      }
      .search-desk-icon svg {
          font-size: 20px;
      }
      .nav-drop-img {
          max-width: 253px;
      }
  
      @media (max-width: 1199px) {
          .hello&gt;li {
              padding: 0px 5px 0px 5px;
          }
          .hello&gt;li&gt;a {
              color: #4A4A4A;
              padding: 20px 5px 46px;
              margin-bottom: 0px;
          }
      }
      @media (max-width: 991px) {
          #navigation {
              display: none;
          }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="header"&gt;
    &lt;section id="navigation"&gt;
      &lt;div class="container"&gt;
        &lt;div class="row"&gt;
            &lt;div class="col-md-12 dropdown-container"&gt;
                &lt;div class="dropdown"&gt;
                    &lt;ul class="hello"&gt;
                        &lt;li&gt;
                            &lt;a href=""&gt;
                                &lt;img src="assets/img/danze-logo-main.png" style="max-width: 160px;" /&gt;
                            &lt;/a&gt;    
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href="" class="dropdown-toggle" id="drodownMenu1" data-toggle="dropdown" aria-expanded="true"&gt;
                                KITCHEN
                            &lt;/a&gt;
                            &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"&gt;
                                &lt;div class="container"&gt;
                                    &lt;div class="row"&gt;
                                        &lt;div class="col-sm-3"&gt;
                                            &lt;ul class="nav-drop-list-block"&gt;
                                                &lt;p&gt;
                                                    PRODUCTS
                                                &lt;/p&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Pull down/ pull out faucets
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Single Handle Faucets
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Two Handle Faucets
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Dual Control Faucets
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Pot Fillers
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Bar &amp;amp; Convenience Faucets
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Accessories
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                            &lt;/ul&gt;
                                            &lt;ul class="nav-drop-list-block"&gt;
                                                &lt;p&gt;
                                                    STYLE
                                                &lt;/p&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Contemporary
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Traditional
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Transitional
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                            &lt;/ul&gt;
                                        &lt;/div&gt;
                                        &lt;div class="col-sm-3"&gt;
                                            &lt;ul class="nav-drop-list-block"&gt;
                                                &lt;p&gt;
                                                    FINISH
                                                &lt;/p&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Chrome
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Stainless Steel
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Oil Rubbed Bronze
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Satin Black
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Antique Copper
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Polished Nickel
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                            &lt;/ul&gt;
                                        &lt;/div&gt;
                                        &lt;div class="col-sm-3"&gt;
                                            &lt;ul class="nav-drop-list-block"&gt;
                                                &lt;p&gt;
                                                    COLLECTION
                                                &lt;/p&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Amalfi&amp;trade;
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Antiock&amp;trade;
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Draper
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Melrose&amp;trade;
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Midtown&amp;trade;
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Opulence&amp;trade;
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Parma&amp;trade;
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Parma&amp;trade;
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Prince&amp;trade;
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Selene&amp;trade;
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Sirius&amp;trade;
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        The Foodie&amp;trade;
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        Vaughn
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                            &lt;/ul&gt;
                                        &lt;/div&gt;
                                        &lt;div class="col-sm-3"&gt;
                                            &lt;img src="assets/img/slider-zoom-img-1.jpg" class="nav-drop-img" /&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href="" href="" class="dropdown-toggle" id="drodownMenu2" data-toggle="dropdown" aria-expanded="true"&gt;
                                BATHROOM
                            &lt;/a&gt;
                            &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2"&gt;
                                &lt;li role="presentation"&gt;
                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                        hello
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li role="presentation"&gt;
                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                        how are you
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li role="presentation"&gt;
                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                        im fine
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li role="presentation"&gt;
                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                        been doing well
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li role="presentation" style="color:green"&gt;
                                    how about you?
                                &lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href="" href="" class="dropdown-toggle" id="drodownMenu3" data-toggle="dropdown" aria-expanded="true"&gt;
                                PROFESSIONALS
                            &lt;/a&gt;
                            &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3"&gt;
                                &lt;div class="container"&gt;
                                    &lt;div class="row"&gt;
                                        &lt;div class="col-sm-4"&gt;
                                            &lt;ul&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        tired
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        hungry
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        sleepy
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        toothy
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                            &lt;/ul&gt;
                                        &lt;/div&gt;
                                        &lt;div class="col-sm-4"&gt;
                                            &lt;ul&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        tired
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        hungry
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        sleepy
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                                &lt;li role="presentation"&gt;
                                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                                        toothy
                                                    &lt;/a&gt;
                                                &lt;/li&gt;
                                            &lt;/ul&gt;
                                        &lt;/div&gt;
                                        &lt;div class="col-sm-4"&gt;
                                            &lt;img src="assets/img/slider-zoom-img-1.jpg" style="max-width: 100%;" /&gt;
                                        &lt;/div&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                            &lt;a href="" href="" class="dropdown-toggle" id="drodownMenu4" data-toggle="dropdown" aria-expanded="true"&gt;
                                INNOVATIONS
                            &lt;/a&gt;
                            &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu4"&gt;
                                &lt;li role="presentation"&gt;
                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                        Action
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li role="presentation"&gt;
                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                        Another action
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li role="presentation"&gt;
                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                        Something else here
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li role="presentation"&gt;
                                    &lt;a role="menuitem" tabindex="-1" href="#"&gt;
                                        Separated link
                                    &lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li role="presentation" style="color:green"&gt;
                                    Yay! The menu extends the full width of the page
                                &lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/li&gt;
                        &lt;li id="search-desk-block"&gt;
                            &lt;form&gt;
                                &lt;div class="form-group"&gt;
                                    &lt;input type="text" class="form-control" placeholder="Search" /&gt;
                                    &lt;span class="search-desk-icon"&gt;
                                        &lt;i class="fas fa-search"&gt;&lt;/i&gt;
                                    &lt;/span&gt;
                                &lt;/div&gt;
                            &lt;/form&gt;
                        &lt;/li&gt;
                    &lt;/ul&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Also, here's a fiddle: <a href="https://codepen.io/kmgiffin/pen/qYbyxo/" rel="nofollow noreferrer">https://codepen.io/kmgiffin/pen/qYbyxo/</a></p>