CSS Navigation

by Abhishek 07-Jul-16

2 1858


For create navigation / menus for your website or webpage, please use below advance 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:

CSS Navigation


Share:


Comments

  1. monografiasprontas.com Jan 22, 2019 at 11:22 am

    Hi, constantly i used to check website posts here in the early hours in the daylight, because i like to find out more and more.

Leave a Reply