CSS Menu
Style 3
Source Code
<div id = "style3">
<h1>My Site:</h1>
<ul>
<li><a href ="#">Home</a></li>
<li><a href ="#">About</a></li>
<li><a href ="#">Contact</a></li>
</ul>
<ul>
<li><a href ="#">Home</a></li>
<li><a href ="#">About</a></li>
<li><a href ="#">Contact</a></li>
</ul>
</div>
<div class = "content_box3">
Style 2 Content Box
</div>
CSS for #style3
#style3 {
font-family: Arial;
}
font-family: Arial;
}
CSS for H1
#style3 h1 {
width: 120px;
font-size: 14px;
font-weight: bold;
color: #FFFF99;
text-transform: uppercase;
margin: 0px;
padding: 16px 0px 2px 10px;
float: left;
background-image: url(gradient3.gif);
background-repeat: no-repeat;
font-size: 14px;
font-weight: bold;
color: #FFFF99;
text-transform: uppercase;
margin: 0px;
padding: 16px 0px 2px 10px;
float: left;
background-image: url(gradient3.gif);
background-repeat: no-repeat;
}
gradient3.gif = 
CSS for UL
#style3 ul {
margin: 0px;
padding: 8px 0px 0px 0px;
list-style: none;
padding: 8px 0px 0px 0px;
list-style: none;
}
CSS for LI
#style3 li {
width: 130px;
font-size: 14px;
font-weight: bold;
border-right: 1px solid #FF6600;
float: left;
font-size: 14px;
font-weight: bold;
border-right: 1px solid #FF6600;
float: left;
}
CSS for link
#style3 li a {
width: 120px;
color: #663300;
text-decoration: none;
display: block;
padding: 5px;
background-image: url(gradient1.gif);
color: #663300;
text-decoration: none;
display: block;
padding: 5px;
background-image: url(gradient1.gif);
}
gradient1.gif = 
CSS for visited link
#style1 li a:visited {
color: #663300;
text-decoration: none;
text-decoration: none;
}
CSS for hover link
#style2 li a:hover {
color: #FF6600;
text-decoration: none;
background-image: url(gradient2.gif);
text-decoration: none;
background-image: url(gradient2.gif);
}
CSS for content box
.content_box3 {
width: 720px;
font-family: Arial;
font-size: 11px;
background-color: #FFFF91;
border: 1px solid #FF6600;
padding: 15px;
clear: left;
font-family: Arial;
font-size: 11px;
background-color: #FFFF91;
border: 1px solid #FF6600;
padding: 15px;
clear: left;
}
