title: Centered CSS menu with submenu
body: <p>I want to have a centered CSS menu with submenu. I could do a part of it (main menu) but I have problems on showing submenu. When I hover main menu items to show their submenu, problem starts ... </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>* {
    font-family:arial;
  }
  
  #menu {
      height: 65px;
      background: #f3f3f3;
      text-align: center;
  }
  
  #menu ul {
      list-style: none;
      text-align: center;
      margin: 0;
      padding: 0;
      position: relative;
      top: 15px
  }
  
  #menu ul li {
      list-style: none;
      text-align: center;
      margin-left: 5px;
      margin-right: 5px;
      display: inline;
  }
  
  #menu ul li a {
      padding: 4px 10px 6px 10px;
      border-radius: 3px;
      display: inline-block;
      color: #666;
      transition: all 0.3s;
  }
  
  #menu ul li a:hover, #menu ul li a:focus, #menu ul li a.active  {
      background: #58c071;
      color: white;
  }
  
  .submenu {
    display:none;
    position:absolute;
    top: 5px;
    width: 200px;
    background:white;
  }
  
  #menu li:hover &gt; ul {
    display: block
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="menu" class="text-center"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Products&lt;/a&gt;
        &lt;ul class="submenu"&gt;
          &lt;li&gt;&lt;a href=""&gt;Product 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Product 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Product 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/e8wyp6et/1/" rel="nofollow noreferrer">https://jsfiddle.net/e8wyp6et/1/</a>  </p>
  
  <p>Do you have any idea?</p>