title: CSS a:hover inline?
body: <p>I have been trying to create a navigation bar for a website I am making, and I want each button to display a difference colour when highlighted. I have used <code>&lt;ul&gt;</code> to create the navigation bar. The question is, is there a way to use the "a:hover {background:#;}" as inline CSS on a specific element? </p>
  
  <p>I have tried giving each <code>&lt;li&gt;</code> or <code>&lt;a&gt;</code> an id and then creating references to them in the internal style sheet, but can't get it to work. Below is what I have so far;</p>
  
  <pre><code>#menu {height:37px;display:block;margin:20px auto;border:1px solid;border-radius:5px;margin-left:30px;max-width:550px}
  #menu ul {margin:0;padding:0;}
  #menu li {float:left;display:block;min-width:110px} 
  #menu a {display:block;padding:12px;font:bold 13px/100% Arial, Helvetica, sans-serif;text-align:center;text-decoration:none;text-shadow:2px 2px 0 rgba(0,0,0, 0.8); background-color:#5A8A41;border-right:1px solid #1b313d; color:#fff;}  
  #menu a:hover {background:#5D80B0;}
  ...
  &lt;div id='menu'&gt;
  &lt;ul&gt;
     &lt;li class='active'&gt;&lt;a href='#'&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href='#'&gt;XML&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href='#'&gt;SQL&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href='#'&gt;Java&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href='#'&gt;C#&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Just so your aware, I have been using html and CSS for all of 1 week. So I apologise if this is a stupid question. Thanks.</p>