<!DOCTYPE html>  
<html>  
<head>  
<style>  
    ul {  
      list-style-type: none;  
      margin: 0;  
      padding: 0;  
      width: 200px;  
      background-color: lightblue;  
    }  

    li a {  
      display: block;  
      color: blue;  
      font-size:20px;  
      padding: 8px 16px;  
      text-decoration: none;  
    }  
    .active{  
      background-color: orange;  
      color: white;  
    }  
    li a:hover {  
      background-color: orange;  
      color: white;  
    }  
</style>  
</head>  
<body>  
  
    <h2>Menu Navigasi Vertikal</h2>  

    <ul>  
      <li><a href="#" class = "active">Beranda</a></li>  
      <li><a href = "#">Java</a></li>  
      <li><a href = "#">CSS</a></li>  
      <li><a href = "#">HTML</a></li>  
      <li><a href = "#">Bootstrap</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.