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:-
