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

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

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

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

    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. Pingback: 100 Great CSS Menu Tutorials~~~by SUYASH - HearTThrobeHearTThrobe

  6. vicky

    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.

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

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

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

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

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

  12. web design company businesses

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

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

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

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

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

Leave a Reply

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