.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.
<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>
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;
}
Below is the live demo that you can check.
0 Comments