How to make a simple navigation bar

In this tutorial . I will show you how you can make a simple horizontal navigation bar.

So first make an unordered list with few list items .

• Home
• About
• Contact Us

Now let’s style it using css

li{

display:inline;

padding:10px;

background-color:black;

color:white;

border:1 px solid white;

}

li:hover{

background-color:red;

}

Now run it and hover your mouse on it . See with so less code you have done wonders.

 Now you can upgrade your navigation bar and make it more stylish . Here is the new cide with minimal changes

li{
 display:inline;

padding:15px;

background-color:black;

color:white;

}

li:hover{

background-color:red;
padding-bottom:5px;
font-family:”Palatino Linotype”, “Book Antiqua”, Palatino, serif

}
 

Here we have added more properties in css rule that is li:hover{}

When user hovers his/her mouse the bottom padding will decrease which will distinguish the selected navigation menu item from others. 

Second thing that will change is the font .

Here is the screenshot:-