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


32 thoughts on “Tutorial to create a Beautiful, simple, horizontal CSS menu

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

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

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

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

  5. Really nice example. This is what I am finding. Thanks for your sharing (Visit my site with ugly menu ^^ Bao Ve)

  6. Pingback: 100 Great CSS Menu Tutorials~~~by SUYASH - HearTThrobeHearTThrobe

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

  8. Pingback: 100 Great CSS Menu Tutorials | IT Teck, IT Tech, DOS, What is DOS, how to dos, dos command, new technology, technology

  9. Pingback: 100 Great CSS Menu Tutorials « Web Development informations

  10. Pingback: 50 Cool CSS Menus, Free Source Codes + Tutorials - WebStockBox

  11. Pingback: [آموزش] ۳۰ آموزش ساخت منو css جذاب

  12. Pingback: 50 fatastic CSS Menu Tutorials | Web Designer Blog – Webdesigner Place

  13. It’s very effortless to find out any topic on net as compared to books, as I found this post at this web site.

  14. Pingback: 100 Great CSS Menu Tutorials | A1 Web Design Team :: Blog

  15. Pingback: 100 Great CSS Menu Tutorials | Computer Resources

  16. Pingback: 99+ Awesome CSS Menu Tutorials | The News Block

  17. Pingback: 100 Great CSS Menu Tutorials | CSS Thirteen

Leave a Reply

Your email address will not be published. Required fields are marked *