css

Create a simple Vertical menu using CSS Example 1

A simple example of creating vertical menu using CSS and HTML. We have created different examples for the same. This is one of them.

.v_menu {
    border: 1px solid #ddd;
    width: 250px;
    margin: 0;
    padding: 5px;
    border-radius: 10px;
}
.v_menu li {
    display: block;
}
.v_menu li a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    border-radius: 10px;
    color: #000;
    font-size: 15px;
}
.v_menu li a.active {
    background: #000;
    color: #fff;
}

Firstly, we need to create HTML markup to create out simple vertical menu. You can copy below HTML code for that.

HTML code

<ul class="v_menu">
    <li><a href="#" class="active">My Account</a></li>
    <li><a href="#">All Products</a></li>
    <li><a href="#">Customer Help</a></li>
    <li><a href="#">My Orders</a></li>
    <li><a href="#">Logout</a></li>
</ul>

CSS code

Paste below code in your CSS to style your vertical menu and create it.

.v_menu {
    border: 1px solid #ddd;
    width: 250px;
    margin: 0;
    padding: 5px;
    border-radius: 10px;
}
.v_menu li {
    display: block;
}
.v_menu li a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    border-radius: 10px;
    color: #000;
    font-size: 15px;
}
.v_menu li a.active {
    background: #000;
    color: #fff;
}

Live Demo

Below is the live demo that you can check.

Was this helpful?