title: Submenu hides on hover
body: <p>I have HTML Menu and Submenu. For some reason, the submenu hides when I' am hovering over them. When I hover on the parent menu, submenu shows and as soon as am hovering over the submenu it hides.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="main-menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#" class="sf-with-ul"&gt;Home&lt;span class="sf-sub-indicator"&gt;&lt;i class="icon-angle-down"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span class="sub"&gt;Start here&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="sf-with-ul"&gt;Features&lt;span class="sf-sub-indicator"&gt;&lt;i class="icon-angle-down"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span class="sub"&gt;remix all features&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="transparency"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Accordion&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Buttons&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" class="sf-with-ul"&gt;Typography&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;MP3&lt;span class="sub"&gt;full archive&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Video&lt;span class="sub"&gt;latest clips&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#" class="sf-with-ul"&gt;Gallery&lt;span class="sf-sub-indicator"&gt;&lt;i class="icon-angle-down"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span class="sub"&gt;Photo Gallery&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="transparency"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Gallery 4 Column&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Gallery 3 Column&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Gallery 2 Column&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Pages&lt;span class="sf-sub-indicator"&gt;&lt;i class="icon-angle-down"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span class="sub"&gt;more templates&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="transparency"&gt;
          &lt;li&gt;&lt;a href="#"&gt;RTL Support&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Events&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;MP3 Single Wide&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Blog&lt;span class="sf-sub-indicator"&gt;&lt;i class="icon-angle-down"&gt;&lt;/i&gt;&lt;/span&gt;&lt;span class="sub"&gt;latest news&lt;/span&gt;&lt;/a&gt;
        &lt;ul class="transparency"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Blog Left Sidebar&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Blog Both Sidebar&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#main-menu{
      float: right;
      position: relative;
      margin: 20px 0 0 -20px;
  }
  #main-menu ul{
      float: right;
      padding: 0;
      position: relative;
      margin: 0;
      list-style: none;
  }
  #main-menu li{
      float: left;
      position: relative;
      padding: 0;
  }
  #main-menu a{
      padding:0 20px 22px 0;
      display: block;
      position: relative;
      color: #fff;
      text-transform: uppercase;
      font-size: 14px;
      text-decoration: none;
      font-weight: bold;
  }
  #main-menu li a span {
      font-size: 12px;
      font-family: tahoma;
      font-weight: normal;
      text-transform: none;
      display: block;
      color: #AFAFAF;
      margin: 10px 0 0 0;
  }
  #main-menu li ul{
      display: none;
      position: absolute;
      width: 170px;
      word-break: break-all;
  }
  #main-menu li:hover &gt; ul{
      display: block;
      margin-top: 11px;
  }
  #main-menu li &gt; ul li{
      display: block;
      width: 100%;
  }
  #main-menu li &gt; ul li a:hover{
      display: block;
      width: 100%;
      background: #FFF;
      color: #000;
  }
  #main-menu li &gt; ul li a{
      font-weight: normal;
      padding: 8px 15px;
      line-height: 20px;
      color: #fff;
      text-transform: none;
      letter-spacing: 0;
      -webkit-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
  }
  </code></pre>