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>
Related examples in the same category