Update background image when mouse hover
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style rel="stylesheet" type="text/css"> #menu ul { display: block; float: left; width: 550px; overflow: hidden; } #menu li { width: 110px; padding: 0 0 2px 0; float: left; list-style-type: none; font-family: Tahoma; font-size: 11px; background-image: url(image-demo-2011/but.gif); background-position: top left; background-repeat: no-repeat } #menu li a { width: 110px; display: block; float: left; text-align: center; line-height: 31px; color: #616365; text-decoration: none } #menu #active { background-image: url(image-demo-2011/but_a.gif); background-position: -1px 0 } #menu #active a { color: #FFFFFF } #submenu { background-image: url(image-demo-2011/subbg.gif); background-position: top left; background-repeat: repeat-x; height: 29px; width: 100%; float: left } #submenu .first { padding: 11px 0 0 261px } #submenu .second { padding: 11px 0 0 371px } #submenu a { display: block; float: left; font-family: Tahoma; font-size: 11px; color: red; text-decoration: none; background-image: url(image-demo-2011/bullet.gif); background-position: top left; background-repeat: no-repeat; padding: 0 0 0 17px; margin: 0 30px 0 0; line-height: 10px; } #submenu #over,#submenu a:hover { background-image: url(image-demo-2011/bullet_a.gif) } #submenu li { list-style-type: none; display: inline; } </style> </head> <body> <div id="menu"> <ul> <li id="active"><a href="index.html">Home</a></li> <li><a href="index2.html">Products</a></li> <li><a href="index2.html">Services</a></li> <li><a href="index2.html">Dealers</a></li> <li><a href="#">Forum</a></li> </ul> </div> <div id="submenu"> <ul class="first"> <li><a href="#" id="over">Mission</a></li> <li><a href="#">Company</a></li> <li><a href="#">History</a></li> <li><a href="#">News</a></li> </ul> </div> </body> </html>