Fresh Set of CSS-only Menus

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 […]

By in Articles on
Demo Download

cssonly

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!

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Grid Zoom Layout

Double Image Hover Effects with Clip-Path Animations

Superhero Animation Effect with SVG Filters

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 12

Comments are closed.

  1. Pingback: Fresh Set of CSS-only Menus | Codrops Eating

  2. Pingback: uberVU - social comments

  4. 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.

  8. 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.

  9. 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! 🙂

  10. Great tutorial.

    I was wondering, how would you get an active state on these links?

    I’m having trouble using the

    method

  11. 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

  12. 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! 🙂