title: Keep showing dropdown menu on father element hover state
body: <p>I' ve been dealing with this all day and i can't find the way to make it work. I'm trying to show a submenu when hovering over the father element. The problem is that as soon as i try to move outside the father element the submenu dissapear, even when the submenu is wrapped but the father element. I've tried the adjacent sibling solution but is not working for me also and i don't know what else to so. Also the dropdown menu have an absolute positioned container so maybe that's part of the problem ? Here's the code:</p>
  
  <pre><code>            &lt;div class="header__top-bar top-bar show"&gt;
              &lt;a class="header__logo"&gt;
                  &lt;img src="assets/img/logo.png" alt="Corporate Logo"&gt;
              &lt;/a&gt;
              &lt;nav class="main-menu"&gt;
                  &lt;ul&gt;
                      &lt;li class="main-menu__item mega-dropdown"&gt;
                          &lt;a href="#"&gt;¿ Quiénes somos ?&lt;/a&gt;
                          &lt;ul class="dropdown-menu mega-dropdown-menu"&gt;
                              &lt;div class="container dropdown-container"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;LA COMPAÑIA&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;GOBIERNO CORPORATIVO&lt;/a&gt;&lt;/li&gt;
                              &lt;/div&gt;
                          &lt;/ul&gt;
                          &lt;div class="background-menu"&gt;&lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li class="main-menu__item mega-dropdown"&gt;
                          &lt;a href="#"&gt;Inversores&lt;/a&gt;
                          &lt;ul class="dropdown-menu mega-dropdown-menu"&gt;
                              &lt;div class="container dropdown-container"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;INFORMACIÓN BURSÁTIL&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;INFORMACIÓN FINANCIERA&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;HECHOS RELEVANTES&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;OPERACIONES SOCIETARIAS&lt;/a&gt;&lt;/li&gt;
                              &lt;/div&gt;    
                          &lt;/ul&gt;
                          &lt;div class="background-menu"&gt;&lt;/div&gt;                 
                      &lt;/li&gt;
                      &lt;li class="main-menu__item mega-dropdown"&gt;&lt;a class="single-option" href="#"&gt;Activos&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="main-menu__item mega-dropdown"&gt;
                          &lt;a href="#"&gt;Actualidad&lt;/a&gt;
                          &lt;ul class="dropdown-menu mega-dropdown-menu"&gt;
                              &lt;div class="container dropdown-container"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;ACTUALIDAD&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;GALERÍA MULTIMEDIA&lt;/a&gt;&lt;/li&gt;
                              &lt;/div&gt;    
                          &lt;/ul&gt;
                          &lt;div class="background-menu"&gt;&lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li class="main-menu__item mega-dropdown"&gt;&lt;a class="single-option" href="#"&gt;Contacto&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
              &lt;nav class="tools"&gt;   
                  &lt;ul&gt;
                      &lt;li class="tools__item languages"&gt;
                          &lt;span&gt;ES&lt;/span&gt;
                          &lt;ul class="languages__list" aria-labelledby="dLabel"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;EN&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;                             
                      &lt;/li&gt;
                      &lt;li class="tools__item search"&gt;
                          &lt;input type="text" id="q" name="q" class="header-search_input valid" value="" placeholder="Buscar" autocomplete="off" aria-invalid="false"&gt;
                          &lt;a&gt;&lt;i class="fa fa-search"&gt;&lt;/i&gt;&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;                   
              &lt;/nav&gt;    
          &lt;/div&gt;
  </code></pre>
  
  <p>SASS:</p>
  
  <pre><code>.header, .sticky-menu { 
  ul {
      margin:0;
  }      
  &amp;__logo {
      float:left;
  }
  .container&gt;* {
      display:inline-block;
  }
  .main-menu {
      &gt;ul {
          &gt;li {
              display:block;              
              float:left;
              position: relative;
              &amp;:last-child {
                  a {
                      margin-right: 0;
                  }
              }
              &amp;:hover {
                  ul.dropdown-menu {
                      display:block;
                  }
                  .background-menu {
                      height:65px;
                  }
              }                
              &amp;.mega-dropdown {
                  position: static !important;
              }
              &gt;a {
                  background:url(../img/icon-main-menu.png) no-repeat right 60%;
                  color: $white;
                  font: 1em "Palatino Linotype", "Book Antiqua", Palatino, serif;
                  margin-right:10px;                    
                  padding-right: 20px;
                  position:relative;
                  text-decoration: none;
                  @media only screen and (min-width:1024px) {
                      font-size: 1.2em;
                      margin-right:40px;
                  }                     
                  &amp;:hover {
                      background:url(../img/icon-main-menu-hover.png) no-repeat right 60%;
                      color:$green;                 
                  }
              }
              a.single-option {
                  background: transparent;
                  padding-right: 0;
              }
          }
      }
  }
  .tools {
      float:right;
      ul {
          li {
              color: $white;
              display: inline-block;
              padding-top: .5em;
              padding-bottom: .5em;                
              &amp;:first-child {
                  position: relative;
                  &amp;:after {
                      background-color: white;
                      content: '';
                      height: 20px;
                      position: absolute;
                      right: 0;
                      top: 10px;
                      width: 1px;
                  }
              }
              &amp;.languages {
                  width: 70px;
                  &amp;.open {
                      background-color: $white;
                      color:$green;
                      padding:.5em .5em .5em .8em; 
                      &amp;:first-child {
                          &amp;:after {
                              display:none;
                          }
                      }    
                      .languages__list {
                          display:block;
                      }
                      span {
                          background: url("../img/drop-icon-close.png") no-repeat 95% 50%; 
                      }    
                  }                    
                  span {
                      background: url("../img/drop-icon.png") no-repeat 70% 50%;
                      cursor:pointer;
                      padding-right:2.5em;
                      display:block;                        
                  }
                  .languages__list {
                      background-color: $white;
                      display:none;
                      position: absolute;
                      right:0;
                      top:2.5em;
                      width: 70px;                        
                      li {
                          display: block;
                          &amp;:after {
                              display: none;
                          }
                          a {
                              color: $blue;
                              display:block;
                              font-size: 1em;
                              padding:.5em .5em .5em .8em; 
                              text-transform: uppercase;
                              &amp;:hover {
                                  color:$green;
                              }
                          }                
                      }
                  }   
              }                
              &amp;.search {
                  margin-left: 4px;
                  @media only screen and (min-width:920px) {
                      margin-left: 8px;
                  }    
                  a {
                      img {
                          margin-top: 3px;
                          vertical-align: top;
                      }    
                  }
                  .header-search_input {
                      -moz-appearance: none;
                      -webkit-appearance: none;
                      appearance: none;                                
                      background-color: $white;
                      border: none;
                      color: $bg-dark-grey;
                      display:none;
                      font-size: .625em;
                      font-weight: 600;
                      padding:.5em 0 .5em .5em;
                      position: relative;
                      text-transform: uppercase;
                      transition: width 1s ease-in-out;
                      vertical-align: top;
                      &amp;.open {
                          display:inline-block;   
                          transition: width 1s ease-in-out;
                          -webkit-transition: width 2s, height 4s;
                          width:200px;
                      }
                      &amp;::-webkit-input-placeholder { 
                          color: $text-grey;
                      }                        
                  }
              }
              a {
                  color: $white;
                  margin-right: 5px;
                  text-decoration: none;
                  @media only screen and (min-width:920px) {
                      margin-right: 10px;
                  }                    
              }
              img {
                  cursor: pointer;
                  margin-right: 10px;
                  @media only screen and (min-width:920px) {
                      margin-right: 15px;
                  }                   
              }
          }
      }
  }      
  </code></pre>
  
  <p>And here's a pencode. Hover the first element of the menu and you will see a red box under it. As soon as you move the mouse out of the li element to try to reach the dropdown it dissapears.</p>
  
  <p><a href="https://codepen.io/anon/pen/booLzZ" rel="nofollow noreferrer">Pencode Example</a></p>