Pls see the attached image.I want exactly like this.How i do this using css,i have done the basic structure of ul li,the problem i am facing is that,how to fix the image on hover.
\[code\]<div id="menu-nav"> <ul> <li> <div align="left"><a href="http://stackoverflow.com/questions/11545093/#">Home</a></div> </li> <li> <div align="left"><a href="http://stackoverflow.com/questions/11545093/#">About Us</a></div> </li> <li> <div align="left"><a href="http://stackoverflow.com/questions/11545093/#">Services & Products</a></div> </li> <li> <div align="left"><a href="http://stackoverflow.com/questions/11545093/#">Portfolio</a></div> </li> </ul> </div>CSS#menu-nav { width: 15em; padding: 0 0 0em 0; margin-bottom: 1em; font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif; color: #ffffff;}#menu-nav ul { list-style: none; margin: 5; padding: 0px; border: none;}#menu-nav li { margin: 0; list-style: none;}#menu-nav li a { display: block; padding: 5px 5px 5px 0.5em; color: #ffffff; text-decoration: none; width: 100%;}html>body #menu-nav li a { width: auto;}#menu-nav li a:hover {background-color:#572C86;color: #ffffff;}\[/code\]Pls see the attached image.I want exactly like this.How i do this using css,i have done the basic structure of ul li,the problem i am facing is that,how to fix the image on hover