title: Changing button color on hover
body: <p>Good day! I realise that this question has been asked several times. I looked up some threads here but they didn't seem to be enough so I decided to create a new thread. Long story short this is my second day learning HTML5, CSS3 and javascript. I am at the point where I want to create menus with shiny buttons. </p>
  
  <p>The case here is the following: The buttons show as they should, howver when the mouse hovers over them the color isn't changed. I will post the entire source code. There are a few comments inside to help understand the code better.</p>
  
  <p>The entire source code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
  &lt;style&gt;
  
       ul {
        list-style: none;  
          margin: 40px 0;
      }
      li {
          float : left;
  
          }
      /*This will style the buttons*/
      .buttonStyle {
          width : 60px;
          height : 20px;
         -moz-border-radius: 2px;
          -webkit-border-radius: 2px;
          }
      /*This should make them change their color when they are hovered*/
      a.buttonStyle:hover {
           background: #383;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- custom made list to store the buttons--&gt;
      &lt;ul &gt;
          &lt;!-- Just some buttons to make it look like a menu--&gt;
          &lt;li&gt;&lt;input type="button" class="buttonStyle" /&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="button" class="buttonStyle"/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="button" class="buttonStyle"/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="button" class="buttonStyle"/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;input type="button" class="buttonStyle"/&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>