Active State in Navigation PURE CSS!

Yes it’s old thing in web-developing, you always need a active state for menu and you do it with different ways like this but i did something today, It’s not big and new tech just what i figure it out and it’s so easy to do.

HTML

<div id=”menu_wrapper”>
<ul>
<li><span>Dashboard</span></li>
<li><a href=”#”>Content</a></li>
<li><a href=”#”>Artwork</a></li>
<li><a href=”#”>Orders</a></li>
<li><a href=”#”>Users</a></li>
<li><a href=”#”>Stats</a></li>
<li><a href=”#”>Prints</a></li>
</ul>
</div>

CSS

#menu_wrapper ul{list-style:none;}

#menu_wrapper ul li{float:left;display:block;}

#menu_wrapper ul li span{ display:block; padding:11px; background-color:#fff;height:20px; color:#323028; margin-right:10px;font-size:12px; text-decoration:none;}
#menu_wrapper ul li a{ display:block; padding:11px; background-color:#000;height:20px; color:#323028; margin-right:10px;font-size:12px; color:#fff3c8; text-decoration:none;}
#menu_wrapper ul li a:hover{ display:block; padding:11px; background-color:#fff;height:20px; color:#323028; margin-right:10px;font-size:12px; text-decoration:none;}

So let me explain it to you. So easy! like piece of cake, As you can see we have small html upthere when we want to show it as a active page menu item. We just put span around it and unlink it. And i think css code is so obvies so play with it and have fun!

ps. you need some dynamic coding too.

-Riza