title: CSS - sub menu disappears on hover
body: <p>I apologize upfront if this is a simple mistake.</p>
  
  <p>I'm trying to update the code for a css menu with hover effect, and when i hover over the parent li, the sub menu ul appears. When I try to hover to the submenu, it disappears; from what I can understand there's a gab between the parent li and the sub menu.</p>
  
  <p>The code is for the menu is the one below:</p>
  
  <pre><code>.site-header{
      border-bottom: 1px solid #DADADA;
  }
  
  .site-branding{
      width: 30%;
      padding-top:5px;
  }
  
  .navigation-container{
      width: 70%;
  }
  
  .main-navigation ul {
      clear: both;
      display: block;
      float: left;
  }
  .main-navigation{
      padding-top: 5px;
      display: block;
  }
  
  .main-navigation li{
      display:block;
              border-right: 1px dotted #DADADA;
  }
  
  .main-navigation a{
      padding-right:3px;
      padding-left:3px;
      font-size:75%;
      font-weight: lighter;
      display: block;
  }
  
  .main-navigation li:last-of-type{
      border-right:none
      }
  
  .main-navigation a ul{
      display:none;
  }
  
  .main-navigation ul li:hover ul{
      right: 50%;
      margin-right: -150%;
      width:180px;
      position: absolute;
  }
  
  .main-navigation ul ul a{
      font-size:10px;
      font-weight: lighter;
      width:180px;
  }
  
  .main-navigation ul ul li{
      font-size:50%;
  
  }
  </code></pre>
  
  <p>Thanks in advance</p>