CSS Navigation

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:




3
Leave a Reply

avatar
2 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
monografiasprontas.comontimeinfotechJuliane Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Juliane
Guest

What’s up to every body, it’s my first visit of this web site; this webpage contains awesome and genuinely good material in favor of visitors.

Coding Tag
Admin

Thanks Boss..

monografiasprontas.com
Guest

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.