How to Create a Vertical Menu with CSS

A menu is an essential component of any website, as it helps visitors navigate the site and find the content they are looking for.

A vertical menu, in particular, is a great option for websites with limited horizontal space.

In this tutorial, we will discuss how to create a vertical menu using CSS.

HTML Structure

First, we need to create the HTML structure of our menu.

A basic structure of a vertical menu could look like this:

<ul class="menu">
  <li class="menu-item">
    <a href="#">Home</a>
  </li>
  <li class="menu-item">
    <a href="#">About</a>
  </li>
  <li class="menu-item">
    <a href="#">Services</a>
  </li>
  <li class="menu-item">
    <a href="#">Contact</a>
  </li>
</ul>

In the code above, we have an unordered list with the class “menu” that serves as the container of our menu items.

Each menu item is represented by a list item (li) with the class “menu-item”. The link (a) inside each list item represents the text of the menu item.

CSS Styling

Next, let’s add some styles to our menu using CSS.

.menu {
list-style: none;
margin: 0;
padding: 0;
width: 200px;
}

.menu-item {
background-color: #ddd;
border-bottom: 1px solid #ccc;
}

.menu-item a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
}

.menu-item a:hover {
background-color: #ccc;
}

In the CSS code above, we first set the list-style of our menu to none to remove the default bullet points.

We also set the margin and padding to 0 to remove any whitespaces around the menu.

The width of the menu is set to 200px, but you can adjust this value according to your needs.

For each menu item, we set the background color to #ddd and add a bottom border of 1px and color #ccc to visually separate each menu item.

The links inside each menu item are set to display as blocks, so they will occupy the entire width of their parent elements (the menu items).

We also add some padding to give the links some breathing space, and we set the text decoration to none to remove the underline that is added by default.

Finally, we add a hover effect to change the background color of each menu item when the mouse cursor is over it.