title: CSS Drop Down Menu Not working
body: <p>i'm learning the basic of CSS and trying to create a dropdown menu, i tried creating a dropdown menu using plain CSS, but it's not working.</p>
  
  <p>So far I tried this code:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>&lt;!-- because of the * default code it takes out all margin and padding or idententation --&gt;
  *{
      margin: 0px;
      padding: 0px;}
  
  body
  {
      font-family: verdana;
      background-color: ABC;
      padding: 50px;
  }
  
  h1
  {
      text-align: center;
      border-bottom: 2px solid #009;
      margin-bottom: 50px;
  }
  
  /*rules for navigation menu */
  /*============================================*/
  ul#navmenu, ul.sub1
  {
      list-style-type: none;&lt;!-- sets bullets to none --&gt;
  
  }
  
  ul#navmenu li
  {
      outline: 1px solid red;
      width: 125px;
      text- align: center;
      position: relative;
      float: left;
      margin-right: 4px;
  }
  
  ul#navmenu a
  {
      text-decoration: none;
      display: block; &lt;!-- this code makes the link a button instead  pointing specifically on the link --&gt;
      width: 125px;
      height: 25px;
      line-height: 25px;
      background-color: #FFF;
      border: 1px solid #CCC;
      border-radius: 5px;
  }
  
  ul#navmenu .sub1 li
  {
  
  }
  
  ul#navmenu .sub1 a 
  {
      margin-top: 0px;
  }
  
  ul#navmenu li:hover &gt; a
  {
   background-color: #CFC; &lt;!-- sets all link color when hovering to yellow  --&gt;
  }
  
  ul#navmenu li:hover a: hover
  {
      background-color: #FF0;  &lt;!-- sets all link color when hovering to yellow  --&gt;
  }
  
  ul#navmenu ul.sub1
  {
      display: none;
      position: absolute;
      top: 26px;
      left: 0px;
  
  }
  
  ul#navmenu li:hover .sub1
  {
      display: block;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;h1&gt;Navigation Menu&lt;/h1&gt;
  
  &lt;ul id="navmenu"&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;/li&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;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;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The dropdown menu is not working, it's not hiding the sub menus, i don't know why.</p>
  
  <p>Here is the picture screenshot using Internet Explorer:</p>
  
  <p><a href="http://s23.postimg.org/jrzexl21n/z_IEs.png" rel="nofollow">IE</a></p>
  
  <p>While using Google Chrome:</p>
  
  <p><a href="http://s11.postimg.org/qbo08ftlv/zchromes.png" rel="nofollow">Chrome</a></p>
  
  <p>I can't move on:( Any suggestion why dropdown menu is not working and why it's showing differently using other browsers? 
  Is there a way on how to code CSS dropdown menu where it will show the same on any browser? Thanks in advance.</p>