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


Be Sociable, Share!
If you enjoyed this post, make sure you subscribe to my RSS feed!

Promote Us

  • Add to Mixx!
Ace Hosting India

Tags: ,

Untitled Document

32 Comments

  1. ohhh, thanks for sharing this tutorial :)

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

  3. It works fine in my version of Opera (10.10)
    .-= Andy Walpole´s last blog ..The internet 10 years ago this month – January 2000 =-.

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

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

  6. It works perfect great work !

  7. gr8

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

  9. Andy, change #nav li a:hover
    margin: -1px to 0px and that should do the trick!

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

  11. [...] 34. Tutorial to create a Beautiful, simple, horizontal CSS menu [...]

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

  13. thank but my menu dost work when i need to have second line
    what should i do

  14. [...] 34. Tutorial to create a Beautiful, simple, horizontal CSS menu [...]

  15. [...] 34. Tutorial to create a Beautiful, simple, horizontal CSS menu  [...]

  16. nice man….try adding sub menu in this tutorial…then its real complete :)

  17. thank’s for sharing tutorial,,

  18. Thanks for the beautiful tutorial and i have a doubt abt this if i have to increase the size of the menu

  19. For me it’s don’t work
    Screenshoot : http://imageshack.us/photo/my-images/211/91582726.jpg/
    can you help me?

  20. [...] 37. Beautiful, simple, horizontal CSS menu [...]

  21. [...] شد. هنگام حرکت بر روی آیتم ها افکت جالبی نمایش می یابد. لینک به آموزش ۱۲. منوی پایین رونده با زیرمنوهای تو در تو منوی پایین [...]

  22. [...] Tutorial to create a Beautiful, simple, horizontal CSS menu [...]

  23. How can I make the menu stretch horizontaly so it will fill 100% of a table?

  24. thanx mate! i use this to my site

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

  26. thanks for this tutorial, i already applied at my web. =)

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

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

  29. [...] 34. Tutorial to create a Beautiful, simple, horizontal CSS menu [...]

  30. [...] 34. Tutorial to create a Beautiful, simple, horizontal CSS menu [...]

  31. [...] 34. Tutorial to create a Beautiful, simple, horizontal CSS menu [...]

  32. […] 34. Tutorial to create a Beautiful, simple, horizontal CSS menu […]

Submit a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv badge