How To Create A simple Nav Bar in HTML

How To Create A simple Nav In HTML  With CSS

Step to create a simple nave bar in html 

first of all use the div tag with class type which id name is navigation.

after this use the unorder list tag<ul>is used.

In unorder list tag we used the list tag to create a list of link

it also work like a button.

<div class="navigation">

        <ul>

            <li><a href="">Home</a></li>

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

                <li><a href="">Register</a></li>

                <li><a href="">Jobs</a></li>

                <li><a href="">Login</a></li>

            </ul>

        </div>

with the use of css style sheeet 

1.it is used to set the margin , height ,width,background , space 

.navigation

{

background: #f5f9f0; /* Old browsers */

background: -moz-linear-gradient(top, #f5f9f0 0%, #d4d4d4 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f9f0), color-stop(100%,#d4d4d4)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #f5f9f0 0%,#d4d4d4 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #f5f9f0 0%,#d4d4d4 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #f5f9f0 0%,#d4d4d4 100%); /* IE10+ */

background: linear-gradient(to bottom, #f5f9f0 0%,#d4d4d4 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f9f0', endColorstr='#d4d4d4',GradientType=0 ); /* IE6-9 */

float:left;

width:100%;

margin:10px 0;

-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;

}

.navigation ul

{

float:left;

list-style:none;

}

.navigation ul li

{

float:left;

line-height:59px;

}

.navigation ul li a

{

color:#000;

font-size:16px;

padding:20px 15px;

}

.navigation ul li a:hover

{

background: #00b7ea; /* Old browsers */

background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */

background: linear-gradient(to bottom, #00b7ea 0%,#009ec3 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

color:white;

}