Has any one come across a navbar like this?? If not, can any one guide me to create a similar one.. Thanks much.
The curved shadown may require a bit of trickery, but the rest of it is remarkably simple... though a simple picture still leaves a LOT of questions. <ul id="mainMenu"> <li><a href="#">Paasivu</a></li> <li><a href="#" class="current">Foorumi</a></li> <li><a href="#">Blogit</a></li> <li><a href="#">Mita Uutta?</a></li> </ul> Code (markup): #mainMenu { list-style:none; /* you may want to state a width here, maybe not -- depends on layout */ background:#FFF; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; } #mainMenu li { display:inline; /* don't even TRY to do more with these unless you add dropdowns */ } #mainMenu a { display:inline-block; /* so they obey top/bottom padding */ padding:0.5em; vertical-align:top; /* fix IE oddities */ text-decoration:none; font-weight:bold; color:#000; } #mainMenu .current a { color:#4C0; } #mainMenu a:active, #mainMenu a:focus, #mainMenu a:hover { color:#000; background:#FDB; } Code (markup): Guessing a bit on the colors, and the positioning/border-radius may need to be tweaked, but this is the general idea.