Drop down menu <li> hover changing background image - css

Question

I have a drop down menu and I'd like each main menu tab to change to a specific image while hovering over it with the mouse.
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;}
li ul {display: none;}
ul li a {display: block; text-decoration: none; color: #fff;}
ul li a:hover {}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background-image:url(rf3.gif);}
li:hover li a:hover {background: #fec96b; color:#fff;}
<ul>
<li>Support</li>
<li>Web Design
<ul>
<li>HTML</li>
</ul>
</li>
<li>Content Management
<ul>
<li>Joomla</li>
</ul>
</li>
</ul>
I'd like tabs like 'Support' and 'Web Desing' to change to each of their unique images - they are different.
I tried adding a class to ex.
<li class="hover">Support</li>
but with no success.

Answer 1

Give those two list items a unique class name, and then specify the appropriate CSS for them.
CSS:
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;}
li ul {display: none;}
ul li a {display: block; text-decoration: none; color: #fff;}
ul li a:hover {}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background-image:url(rf3.gif);}
li:hover li a:hover {background: #fec96b; color:#fff;}
li.support > a:hover { background-url(path_to_image_for_support.png); }
li.web-design > a:hover { background-url(path_to_image_for_web_design.png); }
HTML:
<ul>
<li class="support">Support</li>
<li class="web-design">Web Design
<ul>
<li>HTML</li>
</ul>
</li>
<li>Content Management
<ul>
<li>Joomla</li>
</ul>
</li>
</ul>

Answer 2

Use Javascript. Instead of class, use 'ID' and assign each one a number. Then create a Javscript function that will use:
document.getElementById('[line number]').style.backgroundColor = "[desired background color]";
Done.