<!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 {
    text-align: center;
    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;
}
</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 center the navigation links and add a border to the navigation bar.</p>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#PHP">PHP</a></li>
  <li><a href="#JAVASCRIPT">JAVASCRIPT</a></li>
  <li><a href="#JQUERY">JQUERY</a></li>
  <li><a href="#AJAX">AJAX</a></li>
  <li><a href="#REACTJS">REACTJS</a></li>
  <li><a href="#CONTACTUS">CONTACT US</a></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.