title: CSS drop down menu hover effect
body: <p>i was trying to make a simple css drop down menu. I'm not able to achieve the drop down sub menu when you hover over a link. Below is my html and css rule, thanks.</p>
  
  <pre><code>    ul#menu li
      {
          position:relative;
          list-style-type:none;
          float: left;
          padding:0px;
          width: 125px;
          height: 25px;
      }
      ul#sub1 li
      {
          position:absolute;
          left:0;
          width:125px;
          visibility: hidden;
      }
      ul#menu li:hover #sub1
      {
          visibility:visible;
      }
  
  
      &lt;ul id="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Hyperlink 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Hyperlink 2&lt;/a&gt;
              &lt;ul id="sub1"&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;Hyperlink 2.1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Hyperlink 2.2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Hyperlink 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Hyperlink 4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>