Pure CSS Rollover Menu

Pure CSS Menu – light, fast, easy to make, SEO Friendly This is my favorite technique for making CSS rollover menus. Its a combination of image replacement technique, and pure CSS list menus. There is no javascript, and beneath it is valid XHTML code, so you don’t need to worry about SEO performance If your […]

Pure CSS Menu – light, fast, easy to make, SEO Friendly

This is my favorite technique for making CSS rollover menus. Its a combination of image replacement technique, and pure CSS list menus.
There is no javascript, and beneath it is valid XHTML code, so you don’t need to worry about SEO performance

If your menu is 400px by 50px background image should be 400px by 100px. Upper half of picture is background for normal state, and lower half is for rollover.

HTML Code

<div id=”main-nav”>
<ul>
<li><a href=”#” class=”home”><span>Home</span></a></li>
<li><a href=”#” class=”about”><span>About us</span></a></li>
<li><a href=”#” class=”faq”><span>F.A.Q.</span></a></li>
<li><a href=”#” class=”contact”><span>Contact</span></a></li>
</ul>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *