CSS Navigation Bar Drop Down Menu Tutorial | Coding Tag
×

CSS Navigation

4812

To create navigation/menus for your website or webpage, please use the advanced CSS navigation code.

This code is very helpful for you :)

<!DOCTYPE html>
<html lang="en">
<head>
<title> CSS Navigation </title>
<style type="text/css">
ul{
list-style:none;
}
ul li{
float:left;
padding:0 5px;
}
ul li a{
padding: 10px;
color: #fff;
text-decoration:none;
font-size:18px;
background-color:#FF9800;
border-radius:5px;

}
ul li a:hover{ background-color:#989796; }
ul li a.active{ background-color:#989796 }
</style>
</head>

<body>
<ul>
<li> <a href="#" class="active"> Home </a> </li>
<li> <a href="#"> About us </a> </li>
<li> <a href="#"> Our Services </a> </li>
<li> <a href="#"> Our Products </a> </li>
<li> <a href="#"> Contact us </a> </li>
</ul>
</body>
</html>

Note: You can change the default color, active navigation color, radius from above CSS code in head section.

Result:



Best WordPress Hosting


Share:


Discount Coupons

Get a .COM for just $6.98

Secure Domain for a Mini Price



Leave a Reply


Comments
    Waiting for your comments