CSS Simple Accordion Menu

In this tutorial we will be covering the basics of making a simple accordion menu purely with CSS, no Javascript involved. I do have another Accordion Menu tutorial up on here in there parts but it is actually more of a widget than a proper menu, thus why I am doing the Accordion menu tutorial over again.

When Finished our menu will look something like this.

When a menu item with no sub-menu is hovered the hyperlink will turn a deep red but the overall menu remains the same. If a menu item with a sub-menu is hovered than the menu increases in length to show the hidden menu items. As you can see from the image above it will expand dependant on how many items are actually in the sub-menu.

Simple CSS Accordion Menu: HTML

As with any other menu I have shown you how to do we will be starting with the HTML Side of the code. Again like any other menu system we will be using an unordered list with the sub-menu’s embedded inside the list items in their own unordered list.

Our HTML should look something like this:

<div id="verticalmenu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Latest News</a>
      <ul>
        <li><a href="#">Today</a></li>
        <li><a href="#">Yesterday</a></li>
        <li><a href="#">This Week</a></li>
      </ul>
    </li>
    <li><a href="#">Products</a>
      <ul>
        <li><a href="#">Wordpress Templates</a></li>
        <li><a href="#">Joomla Templates</a></li>
        <li><a href="#">Drupal Templates</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Flash Advertising</a></li>
      </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

As you can see inside some of the list items we have secondary unordered lists which hold our sub-menu’s. Once we have finished with our CSS these sub-menu’s will appear only once we hover over the list item that activates it. This will cause our menu to expand out as shown in the first image. This is the basis of any HTML/CSS menu system.

Now we are ready to move onto the CSS side of the coding. First things first we need to style the menu itself and make sure our menu item sit how we want them when they are visible, then we will move onto hiding the sub-menus until and lastly we will make the sub-menu items appear when the top level list items are hovered.

Simple CSS Accordion Menu: CSS

Step One: Styling the Accordion Menu

We will start by doing our typography for the menu itself and give it that simple border with the rounded corners.

#verticalmenu {
  width: 250px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #03F;
  border-radius: 10px;
}

You can insert any typography you want, just remember if you typography is larger than mine you will need to adjust the heights of the <A> tags we are about to set to suit your layout. You will also have to adjust the width property I have in the above CSS as well.

Now we will style up the top level of our menu. We don’t want our lists to have those ugly dots at the beginning so we will get rid of them and to do this we just set out list style type to none. Even though they have been removed they will indent our text somewhat so we will add a negative margin to bring them back across to where we want them. We will also remove the underlining of our links by setting our text decoration to none. Remember we want to display as block.

The last bit of CSS we will add we will make the menu items turn the deep red on hover.

So our code should look something like this:

#verticalmenu a {
  text-decoration: none;
  display: block;
}
#verticalmenu ul {
  list-style-type: none;
}
#verticalmenu ul li {
  color: #03F;
  display: block;
}
#verticalmenu ul li a {
  color: #03F;
  margin-left: -30px;
  height: 20px;
}
#verticalmenu ul li a:hover {
  color: #900;
}

Next lets move onto our sub levels. I have changed the sub-menu text color so that it is similar but you can tell that is different. Because this is a list inside a list the indent from the list dots we removed is bigger than the top level we need to increase the negative margin. I haven’t brought it all the way back to where the top level sits as I would like it slightly indented for effect. Again for it to display right set it to display block.

}

#verticalmenu ul li ul li a {
  color: #09F;
  margin-left: -65px;
  display: block;
  height: 0px;
}

Now lets hide the sub-menu’s

Step Two: Hiding the Accordion Menu Sub-menu Levels

This step is fairly simple for those unfamiliar with the process.We will set the sub-menu display to none.

#verticalmenu ul li ul {
  display: none;
}
#verticalmenu ul li ul li {
  color: #09F;
  height: 0px;
}

We have also made our sub-menu menu items height 0px as a back up. And now we are onto making the the sub-menus work.

Step Three: Making the Accordion Menu Sub-menu Levels Work

This again is a simple process. We only need to add two more bits of CSS and we are finished.

#verticalmenu ul li:hover ul {
  display: block;
}
#verticalmenu ul li:hover ul li {
  height:20px;
  display: block;
}

The first piece is so that when we mouse over the list item in the top level of the menu it will tell the menu level below it to show. And the second tells the items within that menu to display full height.

For an improved version of this that slides out smoothly please visit: Here