CSS menu

Vertical menu
Horizontal menu
Drop down menu

If your website is not limited to a single web page, you should consider adding a navigation bar (menu). The menu section of the website is designed to help the visitor navigate the site. Any menu is a list of links leading to the internal pages of the site. The easiest way to add a navigation bar to a site is to create a menu using CSS and HTML.

Vertical menu

The first step in creating a vertical menu is to create a unordered list. We also need to be able to identify the list, so we'll add an id attribute with the identifier navbar to it. Each <li> element of our list will contain one link:

<ul id="navbar">
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">About us</a></li>
</ul>

Our next task is to reset the list styles set by default. We need to remove external and internal indentations near the list and markers at the list items. Then set the desired width:

#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100px;
}

Now it's time to stylize the links themselves. We will add a background color to them, change the text parameters: color, size and saturation of the font, remove the underline, add small indentations and redefine the display of the <a> element from inline to block. Additionally, the left and bottom frames have been added to the list items.

The most important part of our changes is the redefinition of inline elements to block. Now our links take up all available space of the list items, that is, to follow the link we no longer need to hover the cursor exactly on the text.

#navbar a {
  background-color: #949494;
  color: #fff;
  padding: 5px;
  text-decoration: none;
  font-weight: bold;
  border-left: 5px solid #33ADFF;
  display: block;
}
#navbar li {
  border-left: 10px solid #666;
  border-bottom: 1px solid #666;
}

We combined all the code described above into one example, now by clicking on the Try it button, you can go to the sample page and see the result:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
    <style>
      #navbar {
        margin: 0;
        padding: 0;
        list-style-type: none;
        width: 100px;
      }
      #navbar li {
        border-left: 10px solid #666;
        border-bottom: 1px solid #666;
      }
	  #navbar a {
        background-color: #949494;
        color: #fff;
        padding: 5px;
        text-decoration: none;
		font-weight: bold;
        border-left: 5px solid #33ADFF;
		display: block;
      }
    </style>
  </head>

  <body>
  
    <ul id="navbar">
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contacts</a></li>
      <li><a href="#">About us</a></li>
    </ul>

  </body>
</html>

Try it »

When you hover your mouse over a menu item, its appearance may change, attracting the user's attention. You can create this effect using the pseudo-class :hover.

Let's return to the previous example of the vertical menu and add the following rule to the style sheet:

#navbar a:hover {
  background-color: #666;
  border-left: 5px solid #3333FF;
}

Try it »

Horizontal menu

In the previous example, we looked at the vertical navigation bar, which is most often found on sites on the left or right of the main content area. However, the menu with navigation links is also often located horizontally at the top of the web page.

You can create a horizontal menu by styling a regular list. The display property for the <li> elements must be set to inline so that the list items are placed one after the other.

To place menu items horizontally, first create a unordered list with links:

<ul id="navbar">
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">About us</a></li>
</ul>

Let's write for our list a couple of rules that reset the style used for lists by default, and redefine the list items from block to inline:

#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar li { display: inline; }

Try it »

Now we only need to define the style design for our horizontal menu:

#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  border: 2px solid #0066FF;
  border-radius: 20px 5px;
  width: 550px;
  text-align: center;
  background-color: #33ADFF;
}
#navbar a {
  color: #fff;
  padding: 5px 10px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  width: 100px;
}
#navbar a:hover {
  border-radius: 20px 5px;
  background-color: #0066FF;
}

Try it »

Drop down menu

The menu that we will create will have main navigation links located in the horizontal navigation bar, and sub-items that will be displayed only after the mouse cursor is hovered over the menu item to which these sub-items relate.

First we need to create the HTML structure of our menu. The main navigation links we will place in the unordered list:

<ul id="navbar">
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">About us</a></li>
</ul>

We will place the sub-items in a separate list, by enclosing it in the <li> element, which contains the parent link to the sub-items. Now we have a clear structure for our future navigation bar:

<ul id="navbar">
  <li><a href="#">Home</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contacts</a>
    <ul>
      <li><a href="#">Address</a></li>
      <li><a href="#">Phone</a></li>
      <li><a href="#">Email</a></li>
    </ul>
  </li>
  <li><a href="#">About us</a></li>
</ul>

Try it »

Now let's start writing CSS code. To start, you need to hide the list of sub-items using the display: none; declaration, so that they do not appear on the web page all the time. To display the sub-items, we need to convert the list to a block element when hovering over the <li> element:

#navbar ul { display: none; }
#navbar li:hover ul { display: block; }

Remove the default indents and markers from both lists. The elements of the list with navigation links are made floating, forming a horizontal menu, but for the list items containing sub-items, set float: none; so that they are displayed one under the other.

#navbar, #navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar li { float: left; }
#navbar ul li { float: none; }

Then we need to make sure that our drop-down submenu doesn't move the content below the navigation bar down. To do this, we will set the list items to position: relative;, and the list containing the position: absolute; and add the property top with a value of 100%, so that the absolutely positioned submenu is displayed exactly under the link.

#navbar ul {
  display: none;
  position: absolute;
  top: 100%;
}
#navbar li {
  float: left;
  position: relative;
}
#navbar { height: 30px; }

Try it »

The height for the parent list has been added specially, since browsers do not take into account the content of the element as floating content, then without adding height our list will be ignored by the browser and the content following the list will flow around our menu.

Now we have to stylize both of our lists and the drop-down menu will be ready:

#navbar ul {
  display: none;
  background-color: #f90;
  position: absolute;
  top: 100%;
}
#navbar li:hover ul { display: block; }
#navbar, #navbar ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
#navbar {
  height: 30px;
  background-color: #666;
  padding-left: 25px;
  min-width: 470px;
}
#navbar li {
  float: left;
  position: relative;
  height: 100%;
}
#navbar li a {
  display: block;
  padding: 6px;
  width: 100px;
  color: #fff;
  text-decoration: none;
  text-align: center;
}
#navbar ul li { float: none; }
#navbar li:hover { background-color: #f90; }
#navbar ul li:hover { background-color: #666; }

Try it »