• Article Written 
  • on 10.06.2009
  •  at 09:48 AM
  •  by admin

Tutorial to create a Beautiful, simple, horizontal CSS menu

This is a very simple, horizontal css menu .This tutorial helps to create a simple and attractive CSS menu with a cool hover effect.

First of all let us write CSS code for menu. here goes the code..

[code lang=”css”]

#nav
{
padding:0;
}
[/code]
[code lang=”css”]
#nav li
{
display:inline;
}
[/code]
[code lang=”css”]
#nav li a
{
font-family:Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:10px;
background-color: #333333;
color:#ffffff;
border-bottom:1px;
border-bottom-color:#000000;
border-bottom-style:solid;
}
[/code]
[code lang=”css”]
#nav li a:hover
{
background-color:#9B1C26;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:#000000;
border-bottom-style:solid;
margin:-1px;
}
[/code]

Second of all let us write HTML list for menu. Say we have 7 links, as shown in image, here goes the code..

[code lang="html4strict"]

[/code]

Yeah..! its done! see how simple is to create a CSS menu… A demo..?

Check out the demo below..


Promote Us

  • Add to Mixx!
Ace Hosting India

Tags: ,