<!DOCTYPE html>  
<html>  
<head>  
<style>  
    ul {  
      list-style-type: none;  
      margin: 0;  
      padding: 0px;  
      overflow: hidden;  
      background-color: lightgray;  
    }  

    li {  
      float: left;  
        border-right: 1px solid blue;  
    }  

    li a {  
      display: block;  
      color: blue;  
     font-size:20px;  
      text-align: center;  
      padding: 10px 20px;  
      text-decoration: none;  
    }  
    .active{  
    background-color: gray;  
    color: white;  
    }  
    li a:hover {  
      background-color: orange;  
      color: white;  
    }  
</style>  
</head>  
<body>  
  
    <ul>  
      <li><a class="active" href="#home">Beranda</a></li>  
      <li><a href="#">Java</a></li>  
      <li><a href="#">HTML</a></li>  
      <li><a href="#">CSS</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.