Horizontal menu with CSS, part 1

17 February 2011

In this tutorial you'll learn to create a basic horizontal menu with an unordered list and CSS. This menu can be altered to your own wishes afterwards. In the second part, we will make the menu pretty and maybe even add a flyout!

First you create a new HTML file and enter these styles...:

body {
  font-family: verdana, arial, serif;
  font-size: 12px;
}
#menu {
  background: red;
}


... and this HTML to form a menu:

<div id="menu">
  <ul>
    <li><a href="">Home</a></li>
    <li class="active"><a href="">Tutorials</a></li>
    <li><a href="">Wallpapers</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</div>


This will look like this:



Next you will let the list look less like a list by removing all padding, margin and bullets:

#menu ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}


It will look like this:



Afterwards you float all list-items next to eachother. You do this by floating all li's to the left. To make sure the background of the menu-container stays visible we add a little "hack" on the menu container (#menu). We give this container an overflow: hidden:

#menu {
  background: red;
  overflow: hidden;
}
#menu ul li {
  float: left;
}


This will look like this. We've created a horizontal menu!




We want to style this a little, so we enter these styles:

#menu ul li a {
  display: block;
  padding: 6px 20px;
}


And it looks like this:



To make it look like a real button, we add a background color, remove the underlining and space the menu-items a little:

#menu ul li a {
  display: block;
  padding: 6px 20px;
  background: #FF9900;
  color: #000000;
  margin-right: 5px;
  text-decoration: none;
}


This looks more like a menu:



If you move your mousecursor over the menu or one menu-item is active, you want it to be different than other items. We want to give these items a yellow background:

#menu ul li a:hover,
#menu ul li.active a {
  background: yellow;
}


Et voila, there is our menu!



This is the complete code:

<!DOCTYPE html />
<html>
<head>
<style type="text/css">
body {
  font-family: verdana, arial, serif;
  font-size: 12px;
}
#menu {
  background: red;
  overflow: hidden;
}
#menu ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#menu ul li {
  float: left;
}
#menu ul li a {
  display: block;
  padding: 6px 20px;
  background: #FF9900;
  color: #000000;
  margin-right: 5px;
  text-decoration: none;
}
#menu ul li a:hover,
#menu ul li.active a {
  background: yellow;
}
</style>
</head>
<body>

<div id="menu">
  <ul>
    <li><a href="">Home</a></li>
    <li class="active"><a href="">Tutorials</a></li>
    <li><a href="">Wallpapers</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</div>
 
</body>
</html>
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

2 comments

  1. Gravatar

    Dreamdealer

    31 August 2011

    Beste Ingrid, ik ben al lang van plan een tweede deel te schrijven van deze tutorial, maar dat is er helaas nog niet van gekomen. In de tussentijd zou je kunnen googlen naar "suckerfish dropdown". Dit is de naam die men gegeven heeft aan het uitklap-menu-effect waar je naar op zoek bent. Succes!

  2. Gravatar

    I. Brinkman

    04 August 2011

    Ik vond het een erg duidelijke uitleg echter ik zou graag een zelfde menu willen met nog wat regels onder de knoppen b.v. onder Tutorials, Tutorial 1, Tutorial 2 etc.
    Ik ben zelf al bezig geweest maar het lukt niet helaas.
    Weet u hoe dit moet.

    vriendelijke groeten
    Ingrid