CSS Menu
In this tutorial, I’m going to show you how to make three different style CSS menus with the same html code as seen on csszengarden.com. But of course, this one is much more simpler.
I will show you how to define the styles for h1, ul, and li tags and change its appearance without modifying the html source code.
Click here to preview the demo >
Style 1
Source Code
Basically I have a H1 and a UL list wrapped around by a DIV id=style1
<div id = "style1">
<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_box1">
Style 1 Content box
</div>
CSS for #style1
#style1 {
font-family: Arial;
}
font-family: Arial;
}
CSS for H1
#style1 h1 {
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
background-color: #FF6600;
width: 120px;
text-align: right;
padding: 5px;
margin: 0px;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #FF6600;
border-left: 1px solid #FF6600;
font-weight: bold;
text-transform: uppercase;
background-color: #FF6600;
width: 120px;
text-align: right;
padding: 5px;
margin: 0px;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #FF6600;
border-left: 1px solid #FF6600;
}
CSS for UL
#style1 ul {
font-size: 14px;
font-weight: bold;
margin: 0px;
padding: 0px;
list-style: none;
font-weight: bold;
margin: 0px;
padding: 0px;
list-style: none;
}
CSS for LI
#style1 li {
background-color: #FF9900;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #FF6600;
float: left;
border-top: 1px solid #FF6600;
border-right: 1px solid #FF6600;
}
CSS for link
#style1 li a {
width: 100px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 5px 0px 5px 5px;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 5px 0px 5px 5px;
text-transform: uppercase;
}
CSS for visited link
#style1 li a:visited {
color: #FFFFFF;
text-decoration: none;
text-decoration: none;
}
CSS for hover link
#style1 li a:hover {
color: #000000;
text-decoration: none;
background-color: #FFCC33;
text-decoration: none;
background-color: #FFCC33;
}
CSS for content box
.content_box1 {
font-family: Arial;
font-size: 11px;
clear: left;
background-color: #FFFF91;
border: 1px solid #FF6600;
width: 720px;
padding: 15px;
font-size: 11px;
clear: left;
background-color: #FFFF91;
border: 1px solid #FF6600;
width: 720px;
padding: 15px;
}
