By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Drop-Down Tutorial

This Tutorial shows how to make a CSS drop-down menu with nested lists.

Edited: 2012-08-13 21:05

CSS drop-down menus can be made easily with CSS, once you have a basic understanding of the list and list-item display types, and perhaps the CSS float property. This Tutorial shows how to create a basic horizontal drop-down menu with no sub-menus.

The Parent list items will have a restricted height of 1em applied, which will allow people to still change text size, without breaking the drop-down. We will then use the :hover class on the individual list-items, to remove the height restriction of 1em, and allow to show the nested list this way.

Because we will be using a nested list, for semantic reasons, we will need to change the list items display property to block. This is done automatically when floating the list-items, so we do not need to set the display property specifically.

Creating the CSS based Drop-down menu

The HTML should be simple enough, basically we use a nested list for the links. The visible header in each drop-down, will be marked up using the section element and h1 element, while the navigation it self should be marked up using the HTML nav element.

The HTML Markup

The HTML markup is included below.

<nav>
  <ol>
   <li class="parent">
     <section>
       <h1>Category 1</h1>
       <ol>
        <li>Link 1</li>
        <li>Link 2</li>
       </ol>
     </section>
   </li>
   <li class="parent">
     <section>
       <h1>Category 2</h1>
       <ol>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
       </ol>
     </section>
   </li>
  </ol>
</nav>

If you later want to add more categories to your drop-down, simply add another parent.

<nav>
  <ol>
   <li class="parent">
     <section>
       <h1>Category 1</h1>
       <ol>
        <li>Link 1</li>
        <li>Link 2</li>
       </ol>
     </section>
   </li>
   <li class="parent">
     <section>
       <h1>Category 2</h1>
       <ol>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
       </ol>
     </section>
   </li>
   <li class="parent">
     <section>
       <h1>Category 3</h1>
       <ol>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
       </ol>
     </section>
   </li>
  </ol>
</nav>

The CSS Declarations

The height is set at 1.5em, you may want to adjust this to your own taste. The additional 0.5em is simply included to make up for the padding on the headings.

This is basically all you need, but the Vision example has some additional declarations, which was included to improve the looks of the example.

h1 {font-size: 1em;padding:0.2em;}
li.parent {
  float: left;
  height: 1.5em;
  overflow: hidden;
}
  li.parent:hover {
  height: auto;
}

Working CSS drop-down Example

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>How to create a CSS dropdown menu</title>
    <style type="text/css">
     * {margin:0;padding:0;}
     article, section { /* Older browsers need this fix, to render these elements properly */
       display: block;
     }
   
     h2 {font-size: 1em;padding:0.2em;}
     li.parent {
       float: left;
       margin-left: 0.5em;
       background: silver;
       height: 1.5em;
       overflow: hidden;
     }
     li.parent:hover {
       height: auto;
     }
     nav {
       margin: 1em;
     }
    </style>
  </head>

  <body>
    <nav>
      <ol>
       <li class="parent">
         <section>
           <h1>Category 1</h1>
           <ol>
            <li>Link 1</li>
            <li>Link 2</li>
           </ol>
         </section>
       </li>
       <li class="parent">
         <section>
           <h1>Category 2</h1>
           <ol>
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
            <li>Link 4</li>
           </ol>
         </section>
       </li>
      </ol>
    </nav>
  </body>

</html>

Brugbart Vision!