Skip to content

How to make Navigation Bar in HTML and CSS | Class #04

 
Generally body tag contains three sections they are
  1. Header
  2. Content and
  3. Footer

These three sections having starting and ending tags. Here navigation part was designed after the header ending tag.

Example Navigation code: 

HTML CODE

            <div class=“nav”>
    <ul>
    <li><a href=”#“>Home</a></li>
    <li><a href=”#“>reserved1</a></li>
    <li><a href=”#“>resevred2</a></li>
    <li><a href=”#“>About Us</a></li>
    <li><a href=”#“>Contact Us</a></li>
    </ul> 
    </div> 

CSS CODE

.nav{
           width:100%;
}
.nav ul{
            list-style-type:none;
            background:black;
            padding:0;
            margin:0;
            overflow:hidden;
}
.nav ul li{
            float:left;
}
.nav ul li a{
            text-decoration:none;
            padding:10px 25px;
            display:block;
}
.nav ul li a:hover{
            background-color:green;
            color:white;

Above code Output is:

NV3
5iRKKL4RT
NAV%2B2

Detailed Explaination in VIDEO:

 

Leave a Reply

Your email address will not be published. Required fields are marked *