Custom Horizontal navigation bar in css

How to create custom navigation bar basic in CSS, Horizontal navigation bar with CSS, can feel as given below image:

HTML Code:

<div class="horizontal-navigation-bar">

    <ul>

        <li><a href="#" class="active">Home</a></li>

        <li><a href="#">About us</a></li>

        <li><a href="#">Designs</a></li>

        <li><a href="#">Developments</a></li>

        <li><a href="#">SEO</a></li>

        <li><a href="#">Educations</a></li>

        <li><a href="#">Contact Us</a></li>

    </ul>

    <div class="clr"></div>

</div>

CSS Code:

<style>

    * {

        margin: 0;

        padding: 0;

    }

    ul {

        list-style: none;

    }

    .horizontal-navigation-bar {

        margin: 0;

        float: right;

        padding: 0;

    }

    .horizontal-navigation-bar ul {

        margin: 21px 0 0 0px;

        padding: 0;

        list-style: none;

    }

    .horizontal-navigation-bar ul li {

        background: #bbb;

        color: #333;

        display: inline;

        float: left;

        height: 26px;

        margin: 0 1px;

        padding: 0;

    }

    .horizontal-navigation-bar ul li a {

        background: #bbb;

        color: #333;

        font: bold 12px Verdana, Arial, Helvetica, sans-serif;

        display: block;

        line-height: 26px;

        margin: 0 0px;

        padding: 0 20px;

        text-decoration: none;

    }

    .horizontal-navigation-bar ul li a:hover,

    .horizontal-navigation-bar ul li a.active {

        background: #fff;

        color: #000;

    }

    .clr {

        clear: both

    }

</style>