Navbar in HTML CSS

<html>
<head>
<title>navbar</title>
<style>
.horizontal-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0018c3;
}
.horizontal-menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
.horizontal-menu .active {
    background-color: #1cbb09;
    color: white;
}
.horizontal-menu li {
    float: left;
    border-right: 1px solid #bbb;
}
.horizontal-menu li:last-child {
    border-right: none;
}
.horizontal-menu li a:hover {
    background-color: #111;
}
</style>
</head>
<body>
<nav class="navbar navbar-default " role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
        <div class="horizontal-menu">
        <ul>
            <li><a href="#" class="active">HOME</a></li>
            <li><a href="#">PAGE 1</a></li>
            <li><a href="#">PAGE 2</a></li>
        </ul>
    </div>
    </div>
  </div>
</nav>
</body>
</html>