title: how to make menu on mouse hover in CSS
body: <p>I have a menu. I need to show the submenus when I mouse hover on them. I have some code as follows. But the submenus overlaps with existing menu.</p>
  
  <p>Following is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"&gt;
  
  &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
    &lt;title&gt;CSS Drop Down Menus&lt;/title&gt;
  
    &lt;style type="text/css"&gt;
      * {
        margin: 0;
        padding: 0;
      }
      body {
        font-family: "Trebuchet MS", Helvetica, Sans-Serif;
        font-size: 14px;
      }
      a {
        text-decoration: none;
        color: #838383;
      }
      a:hover {
        color: black;
      }
      #menu {
        position: relative;
        margin-left: 30px;
      }
      #menu a {
        display: block;
        width: 140px;
      }
      #menu ul {
        list-style-type: none;
        padding-top: 5px;
      }
      #menu li {
        float: top;
        position: relative;
        padding: 3px 0;
        text-align: center;
      }
      #menu ul.sub-menu {
        display: none;
        position: absolute;
        top: 20px;
        left: -10px;
        padding: 10px;
        z-index: 90;
      }
      #menu ul.sub-menu li {
        text-align: top;
      }
      #menu li:hover ul.sub-menu {
        display: block;
        border: 1px solid #ececec;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="menu"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
        &lt;ul class="sub-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Pages&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Archives&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;New Posts&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Recent Comments&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;
        &lt;ul class="sub-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Get to know us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Find out what we do&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;
        &lt;ul class="sub-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;E-mail Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Use Our Contact Form&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>
  
  <p>I need some effect like this.
  <img src="https://i.stack.imgur.com/qrOAg.png" alt="enter image description here"></p>
  
  <p>How can I make it.</p>