Tutorial to create a Beautiful, simple, horizontal CSS menu |

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;

}

#nav li 

{

    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;

}

#nav li a:hover 

{

   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..

<ul id="nav">

    <li><a href="#">Home</a></li>

    <li><a href="#">About</a></li>

    <li><a href="#">Services</a></li>

    <li><a href="#">Products</a></li>

    <li><a href="#">Sitemap</a></li>

    <li><a href="#">Help</a></li>

    <li><a href="#">Contact Us</a></li>

</ul>

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

Check out the demo below..

Filed under: Css, Tutorials by admin

Promote Us

Tags: Css ,Tutorials

if you enjoyed reading this article, please check out other related articles below:

Untitled Document

16 Comments

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
Davidsays on : September 1st, 2011 at 1:53 pm Said:

This is a beautiful and simple menu, thanks. What I’m trying to do is add a drop down to it. How would add styles to this menu that would allow me to use a drop down menu structure?
Andysays on : December 23rd, 2011 at 2:34 pm Said:

Everything to the right of a link moves slightly to the left, when you hover the mouse over a link.
What can be done to avoid this?
Usersays on : January 24th, 2012 at 7:00 pm Said:

It works perfect great work !
Waqassays on : March 3rd, 2012 at 12:29 pm Said:

gr8
Bearsays on : March 5th, 2012 at 6:06 am Said:

Under the css for: #nav li a:hover
The last line is: margin:-1px;
I changed it to: margin: 0px

That seems to do the trick. Good luck!
Willsays on : March 17th, 2012 at 2:23 am Said:

Andy, change #nav li a:hover
margin: -1px to 0px and that should do the trick!
Bao Vesays on : March 29th, 2012 at 4:53 am Said:

Really nice example. This is what I am finding. Thanks for your sharing (Visit my site with ugly menu ^^ Bao Ve)
100 Great CSS Menu Tutorials~~~by SUYASH - HearTThrobeHearTThrobesays on : April 2nd, 2012 at 2:17 pm Said:

[...] 34. Tutorial to create a Beautiful, simple, horizontal CSS menu [...]
vickysays on : May 28th, 2012 at 7:22 am Said:

Thanks for the beautiful tutorial and i have a doubt abt this if i have to increase the size of the menu how can i increase please give the information about this asap.
bungasays on : March 30th, 2013 at 2:32 pm Said:

thanx mate! i use this to my site
dRSamsays on : April 17th, 2013 at 8:10 am Said:

thanks for this tutorial, i already applied at my web. =)
MAILsays on : May 4th, 2013 at 9:06 am Said:

Simple menu. For drop down menu, JS code to be included in the code otherwise, pure CSS will not work in IE. For simple CSS JS drop down menu with source code check the following web page:

http://www.freemenu.info/2013/05/js-menu.html
Pankajsays on : May 5th, 2013 at 5:31 am Said:

wow awesome menu. looking cool with black color thanks for share mate :0