In this guide, I will explain how to create a vertical side menu using Bootstrap, and CSS and optionally Javascript. Even if you are a beginner, you will be able to implement this and create a hoverable vertical navigation menu with ease.

There are multiple ways to implement hoverable vertical menu though it depends on some factors.

1. Is the number of sub-items under each menu item equal?
2. Do you want to use Only css or can use jquery plugin too?

Don’t worry if this questions confuse you. Later, when you will see the different examples, you will understand the meaning of these questions.

Method #1– Create Vertical Side Hoverable menu with equal number of sub-items using only CSS

This is the most flexible vertical menu with great user experience though one downside is, you can only keep equal number of sub-items under each menu item which is not usual case generally.

Step 1 – HTML Markup

At first, we will create a basic structure of our vertical menu with 3 menu items and 3-3 sub-items in each menu items.

Note that, here I am using fontawesome too but you are not required to use it. If you do want to use fontawesome icons then don’t forget to add font-awesome.css file in header.

#css