How to Setup a CSS Only Top Navigation Include with Current States

Est. Reading Time: 2 minute

There are different ways to create a Top Navigation include with current states, such as using jQuery, ASP or PHP file includes, that make it very simple. In some instances when you can’t use server side logic to make it work you can use CSS, which is just as easy to setup.

Starting with the HTML, you’ll want to add in the navigation. It can be any setup you prefer, such as an unordered list or DIVs. We will be using an unordered list in this example.

Note: The body tag or any tag that can identify the page specifically is tagged with the same ID or Class as the top navigation link needing to be set as the current state for consistency.


<body id=”about”>
<li><a href="index.html" class="home">Home</a></li>
<li><a href="about.html" class="about"> About</a></li>
<li><a href="contact.html" class="contact">Contact</a></li>

Then we make it all come together with CSS.



nav {float:left;font-family:Arial,Helvetica,san-serif;}
nav ul {text-align:center;}
nav ul li {float:left;display:inline;background:#555;border-right:1px solid #000;}
nav ul li:hover {background:#E6E6E6;}
nav ul li a {display:block;padding:10px 20px;color:#FFF;text-decoration:none;}
nav ul li a:hover{color:#000;}

body#home nav ul li a.home,
body#about nav ul li a.about,
body#contact nav ul li {color:#000; background:#999;}

Source: 456 Berea St