Okay I needed something to procrastinate on...so lucky you I guess. My methodology may not be perfect, but it works and should work (with the exception of the hover span effect) back to IE6. Easy enough to do, just an unordered list, wrap everything in a link and put the titles in their own span. HTML: <ul id="mainMenu"> <li><a href="#"> <span>HOME</span> Back to home </a></li> <li><a href="#"> <span>PRODUCTS</span> What we have for you </a></li> <li><a href="#"> <span>SERVICES</span> What we do </a></li> <li><a href="#"> <span>BLOG</span> Follow our updates </a></li> <li><a href="#"> <span>CONTACT</span> Ways to reach us </a></li> </ul> HTML: Set the <li> to display: inline-block, the span to display:block to force a line and apply hover effects. CSS: #mainMenu{ list-style:none; width:50%; margin:0 auto; } #mainMenu li{ display:inline-block; *display:inline; /*IE6*/ zoom:1; } #mainMenu a{ color:#000; text-decoration:none; display:block; border-left:#ccc dotted 1px; padding:0.2em 1em; font-size:0.75em; color:#bbb; } #mainMenu a span{ display:block; color:#999; font-weight:bold; } #mainMenu a:hover span{ text-decoration:underline; } Code (markup): Working example: http://dredgy.com/examples/anyindiaMenu/ You can grab the CSS and HTML files from that directory.