<!DOCTYPE html>  
<html>  
<head>  
<style>  
    body{  
    background-color: pink;  
    }  
    ul {  
    list-style-type: none;  
    margin: 0;  
    padding: 0;  
    height:100%;  
    top:0;  
    width:150px;  
    overflow: auto;  
    background-color: lightblue;  
    border: 1px solid blue;  
    position: fixed;  
    }  
    li a {  
    display: block;  
    color: blue;  
    font-size:20px;  
    padding: 10px 20px;  
    text-decoration: none;  
    border-bottom: 1px solid blue;  
    }  
    .active{  
    background-color: orange;  
    color: white;  
    }  
    li a:hover {  
    background-color: orange;  
    color: white;  
    }  
</style>  
</head>  
<body>  
  
    <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>  
    <div style="margin-left:20%;padding-bottom:2000px;color:blue;">  
    <h1>Selamat datang di Mbah WP</h1>  
    <h2>Menu Navigasi Samping dengan height: 100%; dan position: fixed;</h2>  
    <h3>Scroll halaman, dan lihat bagaimana menu navigasi samping di halaman</h3>  
  
</div>  
</body>  
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.