Sidebar Links with mouse hover effect
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <style type='text/css'> /***** Side Content *****/ #sidecontent { margin:0; padding:15px 0 0 0; float:right; width:164px; } #sidecontent ul { color:#333; list-style:none; padding:0; margin:0; background:inherit; } #sidecontent li { padding: 0.1ex 0; } #sidecontent li a { color:#000; text-decoration:none; font-size:1em; display:block; padding:8px 20px; background:inherit; } #sidecontent li a:hover { background:#94CC29; color:white; } #sidecontent h4 { font-size:1em; font-weight:bold; margin:0; padding:10px 0 2px 15px; } </style> <title></title> </head> <body> <div id="sidecontent"> <h4>H4 Text</h4> <ul> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ul> <h4>H4 Text</h4> <ul> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> <li><a href="#">List Item</a></li> </ul> </div> </body> </html>