Free CSS Templates

Arrow to tab

This is the navigation which is used in the free css template: Green and Brown Template.

Navigation Demo

The HTML

<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Home</a></li>
<li><a href="#">CSS Templates</a></li>
<li><a href="#">CSS Tutorials</a></li>
<li><a href="#">CSS Templates</a></li>
</ul>
</div>

The CSS

<style type="text/css">
#navcontainer ul{
margin:0;
padding-top:5px;
height:37px;
background:url(http://<b style="color:black;background-color:#ffff66">freecss.info</b>/wp-content/uploads/2008/04/navbg.gif) repeat-x top;
border-bottom:3px solid #3e3128;
}
#navcontainer ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
font-size:11px;
font-weight:bold;
color:#b33b2d;
text-transform:uppercase;
text-align: center;
}

#navcontainer a
{
color:#b33b2d;
text-decoration: none;
display: block;
padding-bottom:10px;
padding-top:7px;
padding-left:20px;
padding-right:20px;
margin-left:3px;
text-decoration:none;
margin-right:3px;
background:url(http://<b style="color:black;background-color:#ffff66">freecss.info</b>/wp-content/uploads/2008/04/arrow.gif) bottom center no-repeat;
}
#navcontainer a:hover { 
background:#3e3128;
color:#fff;
 }
</style>

The Images Used

Affiliates

Top CSS Templates

UK Web Hosting

Arrow to tab

Navigation Demo

The HTML

The CSS

The Images Used

Leave a Comment

Affiliates

Recent Comments

Top CSS Templates