title: Submenu disappear on hover
body: <p>My submenu disappears when i move the mouse out of a-element.
  I'm a student and new to web development, so i thought i would ask here after googling for hours..</p>
  <p>I've tried using .topbar #menus li:hover + .sub, but then the submenu wouldnt show up at all.</p>
  <p>Appreciate all answers.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.topbar #menus{
      position: absolute;
      display: flex;
      flex-flow: row;
      justify-content: space-around;
  }
  
  .topbar #menus &gt; li{
      border: 2px solid rgb(20, 20, 20);
      
  }
  
  .topbar #menus li a{
      display: inline-block;
      width: 100%;
      height: 100%;
      margin-bottom: 0;
  }
  
  .sub a{
      display: inline-block;
      width: 100%;
      height: 100%;
  }
  
  
  .sub{
      display: none;
      border: 2px solid black;
  }
  
  .topbar #menus li a:hover + .sub{
      display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
      &lt;title&gt;Element&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="topbar"&gt;
          &lt;ul id="menus"&gt;
              &lt;li id="food"&gt;&lt;a href="food.html"&gt;FOOD&lt;/a&gt;
                  &lt;ul class="sub"&gt;
                      &lt;li id="breakfast"&gt;&lt;a href="#"&gt;BREAKFAST&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li id="drinks"&gt;&lt;a href="drinks.html"&gt;DRINKS&lt;/a&gt;
                  &lt;ul class="sub"&gt;
                      &lt;li id="colddrinks"&gt;&lt;a href="#"&gt;COLD DRINKS&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li id="offers"&gt;&lt;a href="offers.html"&gt;OFFERS&lt;/a&gt;
                  &lt;ul class="sub"&gt;
                      &lt;li id="foodoffers"&gt;&lt;a href="#"&gt;FOOD OFFERS&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>