Execute
<!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>