title: CSS Dropdown not working on hover
body: <p>I am trying to implement a pure CSS menu on hover. Everything works except that when hide the menu and try to show it on hover...it doesnt happen.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>         &lt;ul id="nav-menu"&gt;
              &lt;li&gt;&lt;a href="#" class="first" id="p-menu"&gt;A&lt;/a&gt;&lt;/li&gt;
                  &lt;ul class="submenu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;C&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;D&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;E&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;F&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;G&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#" class="last"&gt;H&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>And My CSS:</p>
  
  <pre><code>  #nav-menu {
     position: relative;
       }
  
         #header .submenu {
          width: 158px;
              height: 133px;
  background: url(../images/submenu-bg.png) no-repeat;
  position: absolute;
  top: 49px; left: -11px;
  display: none;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>            #header .submenu li a {
  display: block;
  margin: 10px 66px 5px 20px;
  border: 0 none;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>        #header .submenu li a:hover {
  display: block;
  margin: 10px 66px 3px 20px;
  border: 0 none;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>           #nav-menu #p-menu:hover ul.submenu {
  display: block!important;
  </code></pre>
  
  <p>}</p>
  
  <p>Any help would be highly appreciated.</p>