2 Simple Steps to Create Top Navigation Bar

by

In this tutorial we are going to see how to create top navigation bar. Navigation bar is the most important part of any website or blog.

So here we are going to use the 2 simple steps to create navigation bar with HTML and CSS.

1. Write Markup

<div class="nav">       
<ul>         
<li class="home"><a href="#">Home</a></li>         
<li class="about"><a href="#">About</a></li>         
<li class="service"><a href="#">Service</a></li>         
<li class="contact"><a href="#">Contact</a></li>       
</ul>     
</div>

2. CSS

<style> .nav ul {   
list-style: none;   
background-color: #444;   
text-align: center;   
padding: 0;   margin: 0; 
} 
.nav li {   
font-size: 1.2em;   
line-height: 40px;   
height: 40px;   
border-bottom: 1px solid #888;   
display : inline-block;   
padding: 14px 16px; 
}   
.nav a {   
text-decoration: none;   
color: #fff;   
display: block;   
transition: .3s background-color; 
} 
</style>


Leave a Comment