NAVIGATION Menu is used to group variuos hyperlinks in a web-page. We can see Simple navigation menus or CSS Dropdown Menu. In this article, we'll learn to build a simple navigation menu using HTML and CSS Only.

HTML Coding of a simple Navigation menu


<div class="wrap">
    <div class="nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">SOLUTIONS</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </div>
</div>


Start adding following CSS in <head></head> tag..

Remove List Type and padding


<style>
*{ margin:0}
.nav ul{ list-style:none; padding:0}
</style>

Change Background of menu


<style>
*{ margin:0}
.nav ul{ list-style-type:none; padding:0}
.nav ul li{ 
    float:left; 
    margin:0px 5px; 
    background:#000; 
}
</style>

Change color of hyperlinks


<style>
*{ margin:0}
.nav ul{ list-style:none; padding:0}
.nav ul li{ float:left;
     marging:0px 5px; 
     background:#000; 
}
.nav ul li a{ color:#ccc;}
</style>

Change font color on Mouse Hover


<style>
*{ margin:0}
.nav ul{ list-style:none; padding:0}
.nav ul li{ float:left; 
    margin:0px 5px; 
    background:#000; 
}
.nav ul li a{ color:#ccc; display:block; padding:10px}


.nav ul li:hover{ background:#ccc;}
.nav ul li:hover a{ color:#000;}
</style>

Final CSS Menu

Hers is our final CSS Menu.


<style>
*{ margin:0}
.nav ul{ list-style:none; padding:0}
.nav ul li{ float:left; 
    margin:0px 5px; 
    background:#000; 
}
.nav ul li a{ color:#ccc; display:block; padding:10px}


.nav ul li:hover{ background:#ccc;}
.nav ul li:hover a{ color:#000;}  
</style>
<div class="wrap">
    <div class="nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">SOLUTIONS</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </div>
</div>