title: CSS: Background image not working on hover buttom
body: <p>I simply want to pass from top to bottom as a hover, but the buttom is not reacting when the mouse is on top.</p>
  
  <p><strong>HTML:</strong></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"&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" href="style/menuStyle.css" type="text/css" charset="utf-8"&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;ul id="menu"&gt;
          &lt;li&gt;&lt;a href="http://google.com"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://google.com"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://google.com"&gt;Info&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://google.com"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://google.com"&gt;Forum&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://google.com"&gt;Blog&lt;/a&gt;&lt;/li&gt;    
      &lt;/ul&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>a {color:black; text-decoration: none; outline:none; float:left}
  a:visited {color: black}
  ul {list-style:none}
  
  #menu a {display:block;
      width:100px;
      height:50px;
      background: url(../img/boton.png) top;
      text-align:center;
      line-height: 50px;
      display:inline}
  
  #menu a:hover{ color:red;
              background:url(../img/boton.png) bottom}
  </code></pre>
  
  <p><strong>Download the Project:</strong>
  <a href="http://gabrielmeono.com/menu.zip" rel="nofollow">http://gabrielmeono.com/menu.zip</a></p>