Home / Articles / Programming languages / Markup languages / HTML & CSS / Simple drop-down menu using only CSS

Simple drop-down menu using only CSS

Authors: Sergey Fedus

Currently 5 out of 5 Stars.
1
2
3
4
5

Rating: 5/5 (3 votes cast)

Dec 15th 2012 04:02 am 112191004 11196

This article describes how to create a menu using HTML and CSS but without JavaScript.

HTML menu code

Bulleted multi-level lists will be used to create drop-down menu.

<ul id="top-menu">
  <li><a href="#">Languages</a>
    <ul>
      <li><a href="#">Ruby</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">C++</a></li>
    </ul>
  </li>
  <li><a href="#">Browsers</a>
    <ul>
      <li><a href="#">Chrome</a></li>
      <li><a href="#">Opera</a></li>
      <li><a href="#">IE</a></li>
      <li><a href="#">Firefox</a></li>
      <li><a href="#">Safari</a></li>
    </ul>
 </li>
 <li><a href="#">Operation systems</a>
   <ul>
     <li><a href="#">Windows</a></li>
     <li><a href="#">Linux</a></li>
     <li><a href="#">FreeBSD</a></li>
     <li><a href="#">Mac OS</a></li>
   </ul>
 </li>
 <li><a href="#">Others</a></li>
</ul>

Multi-level list is the first step toward creating a sub-menu.

CSS code menu

Now, let's convert the multi-level list into drop-down menu. This must be done by applying several CSS properties. They can be contingently separated into different groups.

The first group includes properties, that give instant result of menu's appearance and functionality (menu items are placed in one row, and after hovering cursor over them the sub-menu will appear). Let's call this first group of properties the menu engine.

Second group of properties are connected to menu's design.

Drop-down menu engine

Remove all margins and markers that are indicators of a list:

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

Margins and markers are removed from the list.

Align the main menu items (Languages, Browsers, Operation systems, Others) to the left side in one row:

#top-menu > li {
  float: left;
  position: relative;
}

#top-menu li a {
  display: block;
}

Aligning main menu items to the left.

To work with the sub-menu positioning, the following CSS properties must be applied: position: absolute - absolute positioning of the element. To place a sub-menu block over other elements apply the property z-index together position. Then, set the width for sub-menu block and of course hide it.

#top-menu li ul {
  display: none;
  z-index: 100;
  width: 140px;
  position: absolute;
}

When cursor hovers over the main menu item, sub-menu will appear.

#top-menu li:hover ul {
  display: block
}

Displaying sub-menu when cursor is over one of the main menu items.

Drop-down menu design

#top-menu > li {
  background-color: #F5F5F5;
  margin: 0 1px 0 0;
}

#top-menu li:hover {
  background-color: #E8E8E8;
}

#top-menu > li > a {
  color: #000000;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 30px;
  padding: 0 10px;
  border: 1px solid #CCCCCC;
}

#top-menu li ul {
  background-color: #ffffff;
  border-top: 1px solid #CCCCCC;
  border-left: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
}

#top-menu li ul li {
  border-bottom: 1px solid #CCCCCC;
}

#top-menu li ul li a {
  color: #000000;
  text-decoration: none;
  line-height: 30px;
  padding: 0 10px;
}

#top-menu li ul li a:hover {
  text-decoration: none;
}