title: Image hover not working..on pure css
body: <pre><code>&lt;div id="headermenu"&gt;
      &lt;ul &gt;
          &lt;li id="menu1"&gt;&lt;a href="#"&gt;&lt;img src="images/menu1.png"/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li id="menu2"&gt;&lt;a href="#"&gt;&lt;img src="images/menu2.png"/&gt;&lt;/a&gt;
              &lt;ul class="submenu2"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;submenu2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;submenu2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;submenu2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;submenu2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;submenu2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;submenu2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;submenu2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;submenu2&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;           
          &lt;li id="menu3"&gt;&lt;a href="#"&gt;&lt;img src="images/menu3.png" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li id="menu4"&gt;&lt;a href="#"&gt;&lt;img src="images/menu4.png"/&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li id="menu5"&gt;&lt;a href="#"&gt;&lt;img src="images/menu5.png"/&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;   
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#headermenu ul ul {
      display: none;
  }
  #headermenu ul{
      padding:0; 
      margin:0; 
      white-space:nowrap;
  }
  #headermenu ul li{
      width: 20%; 
      list-style-type:none; 
      display:inline-block;
      margin-bottom:15px;
      float:left;
      left:0;
  }
  #menu1:hover{
      background: url('images/menu1hover.png');
  }
  </code></pre>
  
  <p>Hover is not working, I wonder how to make a list with image hover, I also want to know how to make a sub list when a li is hover. And if there is another list on sub list how to make it.. on pure css..</p>