Horizontal navigation bar in CSS

How to create custom navigation? 

It depends on the HTML and CSS: because giving a good look and feel. When you need hover effect then we use "display: block" at the navigation button and give color as you wish background or the color as explained below example: 

Horizontal navigation bar in CSS, create custom navigation bar in CSS. You will find look like as given below image:

HTML Code:

<![endif]-->

<nav>

    <ul>

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

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

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

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

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

    </ul>

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

</nav> 

CSS Code:

<style>

    * {

        margin: 0;

        padding: 0;

    }

    ul {

        list-style: none;

    }

    body {

        background: #00ccff;

    }

    nav {

        float: right;

        width: 600px;

        margin: 50px 0 12px 0;

    }

    nav ul {

        margin-left: 22px;

    }

    nav ul li {

        position: relative;

    }

    nav li a {

        color: #000;

        display: block;

        border-radius: 4px;

        float: right;

        font: normal 16px/30px 'Open Sans', sans-serif;

        height: 30px;

        margin-left: 4px;

        padding: 0 13px;

        text-align: center;

        text-decoration: none;

    }

    nav li a:hover,

    nav li.active a {

        color: #000;

        background: #fff;

    }

    nav li a:active {

        background: #01a2ca;

    }

    .clr {

        clear: both

    }

</style>