Create a Simple Navigation Menu Bar For Your Website/Blog [Beginner]


Creating a basic menu using HTML and CSS is pretty straightforward even for starters. If you’re in search for a simple navigation menu bar for your website/blog, here’s all the code you need.

The CSS:

#nav {
   padding:0;
   background: black;
   border-bottom: 1px solid #999999;
   height: 36px;
}
#nav li a {
   font-family: Arial;
   font-size:12px;
   text-decoration: none;
   float:left;
   padding:10px;
   color:white;
   font-weight:bold;
}
#nav li a:hover {
   background:white;
   color:black;
   border-radius: 2px;
   border-bottom: 1px solid white;
}
#nav li {
    display:inline;
}




The HTML:

Click below banner for quick download

Download now (quick server)
<ul id="nav"> 
 <li><a href="#">Home</a></li> 
 <li><a href="#">About</a></li>
 <li><a href="#">Services</a></li>
 <li><a href="#">Products</a></li> 
 <li><a href="#">Blog</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>


Simply change the URL to your desired location.

The Result:

The Author

prayertitus

Great Thinkers will rule the world, I am an Internet freak, Gospel Lover, I Love Music. You can connect with me On Instergram Prayertitus

Leave a Reply

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

nineteen − 10 =