Latest tutorial: Making a Movieclip face another Movieclip or point on the stage | Ask Tutorial5!
 

Get tutorials on EMail




Categories

Navigation

CSS horizontal menu
(101 votes)
Written by AnaS   

From this tutorial you will find out how simple is to create awesome horizontal menus for your website using CSS and HTML.

The menu will look like in the picture below:

csshorizontalmenu.gif

1. Let's begin! Create a new HTML document and save it as cssmenu.html. Although is better to put the CSS code in a external style sheet, in this tutorial we will put the whole CSS code in the HTML file to be easier to follow by readers.

2. Our menu is actually an unordered list element <ul> styled using CSS. So, in the body section of cssmenu.html put the following HTML code:

<ul>
<li><a href="#">Css</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">ActionScript</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">SQL Server </a></li>
<li><a href="#">PHP</a></li>
</ul>

3. Great now, we have the list, let's stylish it! Go in the HEAD section of your cssmenu.html document and put the next CSS code:

<style type="text/css">
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
background:#999900;
padding:5px;
border-right:1px solid #FFFFFF;
}
a:hover{
background:#CCCC00;
}
</style>

In the code above the ul list-style-type was set to none (so we have no bullet before each list element).
For having no line break between list element we set for li display property to inline.
For the a element float was set to left left and some other properties was changed for a good-looking menu. For the a element background was set to #999900 and for hover pseudo-class of the a element background was set to #CCCC00.

The HTML and CSS complete code is below:

<html>
<head>
<style type="text/css">
ul{
list-style-type:none;
}
li{
display:inline;
}
a{
float:left;
width:100px;
text-decoration:none;
color:white;
font-weight:bold;
background:#999900;
padding:5px;
border-right:1px solid #FFFFFF;
}
a:hover{
background:#CCCC00;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS horizontal menu</title>
</head>

<body>
<ul>
<li><a href="#">Css</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">ActionScript</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">SQL Server </a></li>
<li><a href="#">PHP</a></li>
</ul>
</body>
</html>

Hope this tutorial was helpful!

Also checkout our Simple CSS vertical menus tutorial.

 



Subscribe now via RSS feed and get all the new tutorials

written by David Walsh , November 05, 2007

There's still too much code here. I recommend getting rid of all UL/LI code and move the "display:inline;" CSS code into the "a" declaration.

Same functionality, less code.
written by Daniel , November 06, 2007

I actually do not agree with you on that one David.
Keeping the UL/LI code is a good practice, even tough the same effect could of been achieved without.
Its more than usual the time when you have different declarations for UL/LI elements, and its a good practice always declaring their own properties.
written by Adam Risser , November 06, 2007

David: You wouldn't need to declare the "a" as inline since that is its default. You also wouldn't want to remove the list because it is semantically correct.
written by Adina , November 18, 2007

how do you put this menu in the center of your page whitout using a table or a layer if you are using dreamweaver 4?
written by James , November 29, 2007

I couldn't figure out how to get it to align to the center. I thought you could surround the unordered list with < center > but that doesn't really work.

How would I adapt this to use some JavaScript to have hidden menus?

written by Daniel , December 21, 2007

If you want to align it in the middle of the page just place a surrounding div outside it and give it the margin property of 0px auto.
Also check out our CSS vertical menus tutorial.
written by oyun , March 04, 2008

thanks..
written by Rix , April 28, 2008

Hi,
I am having a problem with my CSS horizontal menu, it works fine in Firefox but when I open it in IE, the text is no longer evenly spaced (it clumps up together) See code below.

Is there a fix so that I get the same effect in IE and Safari as firefox?
Cheers,
Rick
________________________________________
/* MENU PANEL*/
#topPanel ul{display:inline; width:756px; height:30px; position:absolute; background:#990033; top:0;right:0; margin:70px 0 0; padding:0 0 0 0; border-bottom:1px solid #AEAEAE; background-color: #990033;}

#topPanel ul li{float:left; font:12px/30px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal;}

#topPanel ul li a{width:108px; height:30px; display:block; padding:0; color:#fff; background:#990033; text-decoration:none; text-align:center; margin:0 0 0 0; top:0px; left:0px; right:0px;}

#topPanel ul li a:hover{font:14px/30px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal; width:108px; height:30px; text-decoration:none; background:url(img/button.gif) no-repeat 0 0 #FFFFFF; color:#FFFFFF;}

#topPanel ul li.active{font:14px/30px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; width:108px; display:block; height:30px; background:url(img/button.gif) no-repeat 0 0 #FFFFFF; color:#fff; text-align:center; margin:0 0 0 0;}
written by prefabrik , May 12, 2008

thnaks
written by Maria , June 15, 2008

Thanks for this tutorial, it helped me creating my own menu with images!
written by hekimboard , July 02, 2008

thanks hekimboard..
written by fibercement , July 19, 2008

thanks.
fibercement
written by Vish , July 25, 2008

Nice one!! Thanks :)
written by Free codes , July 28, 2008

HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out
written by Paris , August 26, 2008

HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out
written by d?? cephe , September 02, 2008

te?ekürler türkiye
written by mantolama , September 02, 2008

thanks mantolama.
written by Nisha , September 03, 2008

Good.
I would like to have a dropdown menu. Can u help me out with it.
written by gogus estetigi , November 18, 2008

For those of you thinking that if they implement this it will eliminate some of the waiting and lines...
written by Burun estetigi , November 29, 2008

Ok, I have an inkling (pun not intended) to modify that book image to the right to say "Schneier on Squid."

"The closest the squid industry has to a rock star."
written by burun estetigi , November 29, 2008

Ok, I have an inkling (pun not intended) to modify that book image to the right to say "Schneier on Squid."

"The closest the squid industry has to a rock star."
written by u , December 11, 2008

aa to tara bapa ne avadatu hatu
written by egeshi , December 12, 2008

Is there a good tutorial to develop UL/LI CSS menu which is horizontally centered? Thanks!
written by bayanlar , December 13, 2008

There are working fine now! Thanks.
written by Turksiding , December 23, 2008

Great working.Thanks
written by vishal vishwakarma , December 29, 2008

hey i need to create the horizonatal menus in the asp.net1.0 version
And how to create the horizonatl menus i don't know can u help me ???
written by söve , December 31, 2008

thanks.
written by oyunlar , January 14, 2009

thanx
written by mantolama , February 02, 2009

thanks.
written by Estetik , March 18, 2009

Ok, I have an inkling (pun not intended) to modify that book image to the right to say "Schneier on Squid."

"The closest the squid industry has to a rock star."
written by artiajans , April 08, 2009

Thanks you too much, this is wonderful
written by Mithun Dhali , April 15, 2009

Thanks you very much. Precise and to the point.
written by gazeteler , April 21, 2009

thanks
written by plastik cerrah , April 24, 2009

You?ve got a lot of cool posts here. Really like it. It served to be helpful. Thanks on that.
written by Dekorasyon , May 05, 2009

Who doesn?t? That sh*t is hilarious. I t is a fact that everyone thinks blackface is funny and chuckles (at least a little on the inside) whenever they see it.
written by ??? ?????? , May 21, 2009

Thank you to our friend, loyal
written by ?stanbul Özel Hastaneler , June 05, 2009

Great information! Very useful for me. Thanks a lot.
The idea is awesome. Congrats.
written by saç ekim , July 23, 2009

nice site thank you for sharing
written by porno , October 04, 2009

than you
written by Oyun , October 14, 2009

thanks admin for this post
written by Opel Yedek Parça , October 14, 2009

really thanks admin
written by ??? , November 05, 2009


Thanks for article. Keep up sharing.
written by Kabin , November 10, 2009

nice article, thanks for your share..
written by Danthalos , November 11, 2009

Hey all, Is there a way to get the same kind of menu without using CSS ?
written by porno , November 16, 2009

Thank you for link.
written by azd?r?c? , November 16, 2009

thank you can?m
written by evden eve nakliyat , November 20, 2009

Who doesn?t? That sh*t is hilarious. I t is a fact that everyone thinks blackface is funny and chuckles (at least a little on the inside) whenever they see it.
written by ChelseaFC Fan , November 21, 2009

nice article! Short and to the point!
written by evden eve nakliyat , December 15, 2009

THANK YOU...
written by sex hikayeleri , January 07, 2010

Thanks a lot...
written by Chetan Trivedi , January 27, 2010

How I create horizontal Sub Menu
written by Yhank Tou ;) , March 08, 2010

Thanks alot =D

Do you need more help? Ask now!
 

busy
Last Updated ( Tuesday, 06 November 2007 )