Last Updated:

Creating a vertical CSS3 drop-down menu

We are often asked for help in creating a vertical drop-down menu for the site, we have repeatedly laid out similar lessons and today we want to talk about the creation of such a menu. Such menus, or as they are also called, accordions, are very convenient for placing and grouping a lot of information, saving space and practicality brings this type of navigation. To create such an accordion we need a bit of CSS, and we also added jQuery to display smooth animations when moving between tabs.


Many different free templates you can find on the website of our partners, there are also premium templates with round-the-clock technical support and help in setting up:


This accordion will be an excellent addition to your resource, as a profile control panel, but it can easily be redone for your needs.

Step 1. HTML

We will have a mainmenu class that will encapsulate the entire navigation structure, then we will create a 2 level accordion menu with an unordered list.



You can get acquainted with the structure in more detail in the sources for the lesson, and we proceed to the next step.


Step 2. CSS

The first thing we need to do is define styles for the main part of the menu, for this we add the following values:



Now add styles to the submenus of our navigation, here's what we have:



Step 3. JS

We need to enable jQuery, so we do the following in our html document:



To activate our accordion and make it work, install the following JavaScript functions:



Such an accordion is a great addition to your website, simplicity and animation will allow you to revive any resource.