<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #555;
	font-weight:bold;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li {
    
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

li a.active {
    background-color: #ff3232;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
.notify{
float:right;
margin-right:7px;
margin-top:-30px;
background-color:#00BFFF;
padding:4px;
color:white;
display:block;
min-width:15px;
text-align:center;
border-radius:8px;
}

</style>
</head>
<body>

  <h2><a href="http://www.skptricks.com/2018/02/vertical-navigation-or-menu-bar-using-css.html" >Vertical Navigation Bar </a></h2>
<p>In this example, we align the navigation links to left side and add a border to the navigation bar.</p>

<ul>
  <li><a class="active" href="#home">Home </a>  <span class="notify"> 10 </span> </li> 
  <li><a href="#PHP">PHP</a>  <span class="notify"> 16 </span> </li>
  <li><a href="#JAVASCRIPT">JAVASCRIPT</a>  <span class="notify"> 40 </span>  </li>
  <li><a href="#JQUERY">JQUERY</a> <span class="notify"> 25 </span>  </li>
  <li><a href="#AJAX">AJAX</a> <span class="notify"> 15 </span>  </li>
  <li><a href="#REACTJS">REACTJS</a> <span class="notify"> 2 </span>  </li>
  <li><a href="#ANDROID">ANDROID</a> <span class="notify"> 5K </span>  </li>
  <li><a href="#CONTACTUS">CONTACT US</a> <span class="notify"> 1K </span>  </li>
</ul>

</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.