Mouse hover effect for left menu
<!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"> * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; color: #666666; font-size: 12px; } #wrapper { width: 637px; margin: 0 auto; } #header { border: 1px solid #ccc; margin: 5px 5px 5px 5px; min-height: 90px; padding: 10px; background-image: url(images/header.jpg); background-repeat: no-repeat; } * html #header {height:90px} /* IE Min-Height Hack */ #centercolumn { /* Parent Wrapper for inside boxes */ border: 1px solid #ccc; margin: 0px 5px 0px 5px; display: inline; /* IE Hack */ padding: 7px; width: 152px; float: left; } #rightcolumn { margin: 0 5px 0px 0px; padding: 8px; display: inline; /* IE Hack */ width: 434px; float: left; border: 1px solid #ccc; } #footer { background-image: url(images/footer.jpg); background-repeat: no-repeat; margin: 5px 5px 5px 5px; display: inline; /* IE Hack */ color: #fff; font-size: 11px; padding: 4px; float: left; width: 617px; border: 1px solid #ccc; } h1 { font-size: 19px; font-family: "Georgia", Times New Roman, Times, serif; color: #7E5F30; } .border { font-size: 11px; border-top: 1px dashed #ddd; border-bottom: 1px dashed #ddd; background-color: #fbfbfb; padding: 7px 7px 7px 7px; margin: 7px 0px 7px 0px; } .mainnav { list-style: none; } ul.mainnav li a:link, ul.mainnav li a:visited { display: block; text-decoration: none; width: 100%; padding: 4px 0px 4px 2px; color: #C0985A; } ul.mainnav li a:hover { display: block; text-decoration: none; padding: 4px 0px 4px 2px; color: #fff; width: 100%; background-color: #CCAB79; } a:link { color: #333333; } a:visited { color: #333333; } a:hover { color: #666; text-decoration: none; } </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="centercolumn"> <p> <ul class="mainnav"> <li><a href="#">What are my options? </a></li> <li><a href="#">Who will decide? </a></li> <li><a href="#">Can I choose a date? </a></li> <li><a href="#">All you need to know </a></li> <li><a href="#">Court Dates </a></li> <li><a href="#">Special Offers </a></li> </ul> </p> </div> <div id="rightcolumn"> <h1>heading?</h1> <p class="border">Published in <a href="#">Weird</a> | Article Submitted by <a href="/">Test</a> </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <br /> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequunturExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> <p> </p> <p> </p> <h1>Is my profession right for me </h1> <p class="border">Published in <a href="#">careers</a> | Article Submitted by <a href="www.code-sucks.com/">Aoife Moloney </a> </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <br /> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequunturExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p> <p> </p> <p> </p> <h1>How to market a website on a budget? </h1> <p class="border">Published in <a href="#">revenue</a> | Article Submitted by <a href="www.code-sucks.com/">Keith Donegan </a> </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p> <br /> <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequunturExcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p> </div> </div> </body> </html>