Horizontal CSS List Menu


This tutorial will show you how to make a horizontal CSS list menu. No images, no javascript. Just a simple, cross browser compatible CSS list menu!

First of all we’ll need the HTML for our list menu, this is just a normal unordered list.

<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<br style="clear:left"/>
</div>

It’s just a simple html page with an unordered list menu on. You might notice I’ve added a div called menu around the list, I like to do this as it helps me remember what part of the code does what if I ever have to go back to it.

Next we’re going to add the CSS code for the div called menu that surrounds the list.

.menu{
	width: 100%;
	background-color: #333; }

Again this is nice and simple. The menu div will be the full width of the div it’s inside and will have a dark grey background.

Next we add the syling for the list and the list items.

.menu ul{
	margin: 0; padding: 0;
	float: left;}

.menu ul li{
	display: inline;}

.menu ul li a{
	float: left; text-decoration: none;
	color: white; 
	padding: 10.5px 11px;
	background-color: #333; }

.menu ul li a:visited{
	color: white;}

.menu ul li a:hover, .menu ul li .current{
	color: #fff;
	background-color:#0b75b2;}

Again it’s all pretty simple, you should be able to understand the code with a little bit of CSS knowledge. Have a tinker with the code if you’re unsure about something.

You might also want to sign up for the RSS Feed or view some of my other CSS Tutorials

  • http://www.evanbot.com Evan Byrne

    Yet again, this works like a charm. Good job.

  • Sam

    good work i was looking for this thanks

  • http://www.thetomwalterscompany.blogspot.com Tom

    Great!

    Works wonderfully!

    :)

  • korpirkor

    Thank You, It’s nice and simple

  • pavel

    simple as everybody wants!
    thanks

  • Sasha

    I can’t get it to work! I copy and paste exactly the way it is. The html code makes a list but when i enter the css code it does nothing.

  • http://www.jamesowers.co.uk James

    Could you upload your site and post the link?

    Jamess last blog post..Automatically published articles with WordPress

  • fazlionline

    this is the best
    but how can i add a submenu to it?

  • devianti

    It works! It didn’t work at first but I figured it out by replacing the class function to div in css…!

    Thanks a lot for the simplicity!

  • http://www.1pagedesign.com.au SaminOz

    Do you have anything on 2 level, horizontal CSS nav bars?

    SaminOzs last blog post..Element (Tag) attributes in XHTML

  • Samia

    Hey,it’s quite simple and easy,but i can’t center it. Can you tell me how i can do it? it’s a bit urgent.

  • http://blog.threenine.co.uk Gary Woodfine

    Awesome thank you!
    Saved me mucking about!!

  • http://www.after5pc.net Bryan – After5PC.net

    This CSS tutorial has solved my problem. Thank you!

    By the way, would you happen to have one with a 2nd-level hierarchy for each menu link?

  • Ed

    How do you add submenus?

  • http://www.arias.ca David

    Thank you! This is probably the most intuitive, easy to follow tut for horizontal list menus. Much appreciated, and thanks for sharing.

  • Pingback: CITS F221 Graphics and Multimedia for the Web » Blog Archive » 07: Navigation, Image Maps, and CSS Sprites

  • http://www.carrotmuseum.co.m John

    Is it possible to create the menu then place it all into a single ccs sheet so that it works on every page autimatically.

  • http://www.jamesowers.co.uk Jmz

    Yes you would just put your code in a separate CSS file and then include the CSS file between the head tags of each html document you want it in.

    To include the CSS file, use the code (code moved to pastebin: http://pastebin.com/mf1ccb51 ) when the name of your CSS file is style.css.

  • Dave

    Thanks, works great. However, how do you center it?

  • http://www.smartlore.com sanjeev

    Good One
    but how can i add a sub menu to it ?

  • stimpson

    ow man this is exactly what i like about these tuts, simpl & basic! With this you can experiment to get your own result fast, which is way more easy then recoding too-complicated examples with the basics somewhere in it. Thanks again!

  • http://www.letm.li website erstellen

    These really helped me to build my homepage, I can really appreciated if people take some time and write a usefull tutorial.

  • Trinda

    thank you thank you.

    I am just learning to find my way through css and this is exactly what I needed!!!!

  • http://www.kairosnetwork.org/ O’Neil

    This is a neat clean horizontal menu. I will be implementing it in the church website today.

  • http://www.gowerpowered.com Alex

    Hey thanks bro! worked great! and simple to follow

  • thed

    works just perfectly.. thanks a lot for the tip..

  • http://www.thegreengreenie.com Vincent

    Brilliant – cleared some things up for me. Very straightforward and well layed out. Thanks very much…

  • Johan

    VERY NICE! THANKS!

  • http://www.tom-elliott.net/ Tom

    Simple, clean code – good job

  • naseema

    hai.. i have one doubt. css list-menu differ in different browser like firefox and ie. pls solve my problem……

  • http://supernova-planing.blogspot.com/ Wirobrojo

    How to make horizontal list catogery likes MP3 category A – Z?

  • Chris

    Nice one for a simple straight forward tutorial.

  • Nidhi

    Hey its really owesome…..thanx

  • http://www.spiralteck.com webb

    simple and straight forward menu.

  • Binu V Pillai

    Sorry mate.

    It wont work properly in firefox. it will alway position on the top of div. We can’t move the list content on the center of “menu” div. margin or padding will not help in this case. we need to do some other css hack.

    my testing environment are:
    Firefox 3.6.16
    Ubuntu 10.04