CSS Menu Style

User Rating: / 0
PoorBest 

Hello

Today i will present you a tutorial where we made a css menu, no images, just css color with <li> (list method)!

Let's begin with html code:

First step is to create the html page. In the head section create the link with css file:

<link href="style.css" type="text/css" rel="stylesheet" media="all"/> 

In the body section must create the html buttons:

<ul id="nav">

    <li><a href="#">Home <div class="textSmall">some text here</div> </a></li>

    <li><a href="#">About Us <div class="textSmall">some text here</div> </a></li>

    <li><a href="#">Services <div class="textSmall">some text here</div> </a></li>

    <li><a href="#">Gallery <div class="textSmall">some text here</div> </a></li>

    <li><a href="#">Contact Us <div class="textSmall">some text here</div> </a></li>

</ul> 

The last step is to create the css file with style.css name, if you prefer another name, change the name in the head section: 

body {

background:url(bg.gif) repeat top center;

}

#nav {

width:750px; 

margin:0 auto;

}

li {

background:#FFF;

float:left;

list-style-type:none;

border-right:solid 1px #FFF;

margin-top:1px;

padding-top:1px;

padding-bottom:1px;

border-top:solid 1px #E6E6D2;

border-bottom:solid 1px #E6E6D2;

}

a{

background:#E6E6D2;

float:left;

color:#4E3D28;

font-size:18px;

font-family:Arial, Helvetica, sans-serif;

text-decoration:none;

outline:none;

padding:10px 25px;

text-transform:uppercase;

}

a:hover{

background:#97AF82;

color:#FFF;

}

.textSmall {

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

font-style:italic;

color:#4E3D28;

text-transform:none;

}