title: CSS: How to create a drop menu using relative position and multiple items
body: <p>I am trying to create a drop-down menu for when the user hovers an item in another menu.</p>
  
  <p>My current HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="menu-main-items"&gt;Item1&lt;/li&gt;
          &lt;ul id="submenu"&gt;
              &lt;li&gt;Sub-item1&lt;/li&gt;
              &lt;li&gt;Sub-item2&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="menu-main-items"&gt;Item2&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.menu-main-items{display:inline;}
  
  #submenu{display:none;}
  
  li:hover #submenu{ //display the submenu below the parent main item }
  </code></pre>
  
  <p>To align the sub-menu with the parent item, I was thinking using <code>position:relative;</code> on <code>#submenu</code> and adding a certain offset, but that causes flickering, as the sub-menu is being displayed before item 2, rearranging the menu. As of now I have searched around and could only find explanation with one item in the main menu which doesn't cause the problem.</p>
  
  <p>Is there another way to approach this?</p>