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..
#nav
{
padding:0;
}
{
padding:0;
}
#nav li
{
display:inline;
}
{
display:inline;
}
#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;
}
{
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;
}
#nav li a:hover
{
background-color:#9B1C26;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:#000000;
border-bottom-style:solid;
margin:-1px;
}
{
background-color:#9B1C26;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:#000000;
border-bottom-style:solid;
margin:-1px;
}
Second of all let us write HTML list for menu. Say we have 7 links, as shown in image, here goes the code..
Yeah..! its done! see how simple is to create a CSS menu… A demo..?
Check out the demo below..
Promote Us
Related Articles:
if you enjoyed reading this article, please check out other related articles below:
Loading...
ajaysays on : June 15th, 2009 at 7:54 am Said:
ohhh, thanks for sharing this tutorial
Matthew Westriksays on : November 3rd, 2009 at 9:21 pm Said:
Uh oh. There seems to be a bug. (at least in Opera). If you mouseover the bar, and move the mouse horizontally, the background change doens’t occur on the other sections, only if you move the mouse out of the bar and over it again.
Maybe this is just a bug with opera.
Andy Walpolesays on : January 12th, 2010 at 7:36 pm Said:
It works fine in my version of Opera (10.10)
Andy Walpole´s last blog ..The internet 10 years ago this month – January 2000