Latest tutorial: Premium Flash Files | Ask Tutorial5! | Subscribe to RSS Register Login Find Hobbies
Advertisement

Get tutorials on EMail




Categories

Navigation

Do you need more help? You can now Ask Tutorial5! and get free support - Ask a question now!

CSS horizontal menu
(32 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

Do you need more help? Ask now!
 

busy
Last Updated ( Tuesday, 06 November 2007 )