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

Simple drop-down menu using only CSS

Simple drop-down menu using only CSS
 
Simple drop-down menu using only CSS
  • Currently 5 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 5/5 (3 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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 submenu

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

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

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 submenu when cursor is over one of the main menu items

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;
}
The end result should look something like this

The end result should look something like this. 

Live demo


 

Read also

Conditional comments for IE

Conditional comments for IE

How to write in HTML

How to write in HTML

Discussion (total 1 comments)

Jeff Fontaine
November 02, 2015 at 08:48 pm
Is there a way you can make the drop-down menu collapse when clicking/touching its tab on the top ?

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation