Fresh Set of CSS-only Menus
Web Design January 31, 2010 by Mary Lou 8 Comments
Here is a set of fresh CSS-only menus for your website – no images, no JavaScript. The markup for the menus is always the same and I used 12 different stylesheets for their appearance. The main idea is to have a big title link and some description under the link. The description can be hidden with visibility:hidden and then shown when hovering over the link element. Title and description are inside of spans and can be styled accordingly.
The markup looks like this:
<div id="menu1"> <ul> <li><a href=""> <span class="title">About</span> <span class="text">Who we are</span> </a> </li> <li><a href=""> <span class="title">Portfolio</span> <span class="text">What we do</span> </a> </li> <li><a href=""> <span class="title">Blog</span> <span class="text">What we talk about</span> </a> </li> <li><a href=""> <span class="title">Contact</span> <span class="text">How to get in touch</span> </a> </li> </ul> </div>
Enjoy!
Discussion8 Join the discussion
Trackbacks
- Fresh Set of CSS-only Menus | Codrops Eating
- uberVU - social comments
- ?????? ????? ???? ?????????? ?? CSS |












Really great, nice styling, thanks for sharing!
Some of the best styled CSS-only menus I know of on the web. I like the grey one which has this typical typographic look.
…menu number 5, 7 and 12…
Nice menu’s, thanks for sharing
What about vertical menu with submenu?