From our sponsor: Get suggestions for improving your content, targeting, and marketing automations to help you increase revenue.
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>
Pingback: Fresh Set of CSS-only Menus | Codrops Eating
Pingback: uberVU - social comments
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?
Nice work. I haven’t tested this yet so I could be wrong, but I don’t think you need to put a span tag or a class on the actual link title. You only need a span tag and class on the description from the looks of it.
Oh and you don’t need the div tag either unless you need to group the list with another element or you need to do some complex positioning. Just a FYI. But I’ve bookmarked this post anyway for future inspiration. Cheers! 🙂
I was wondering, how would you get an active state on these links?
I’m having trouble using the
Hello Mary Lou, I am having difficulty with alignment, it works perfectly in FF, Chrome and Safari but my menu appears offset in i.e – I know I have done something stupid 🙂 but I can’t see what, so any help would really be appreciated
cheers, thanks again Jeff
Thank you…I’ve been testing your demos and I think your contribution is great! I really like people who knows a little more than the rest and share their knowledge with the rest! good for you! 🙂