How to spice up your menu with CSS3

Quick tip on how to spice up your menu with CSS3: add an image to every menu item and slide it out on hover.

From our sponsor: Grow with Mailchimp's All-in-One Marketing Platform

In this new category called “Tips and Tricks” we will introduce some quick and interesting methods around web development and web design. In today’s tip we’ll show you how to spice up your menu by adding a neat hover effect to it. The idea is to slide an image out to the right when hovering over a menu item.

Each menu item (which is a unordered list item in this case) will have an anchor containing two spans and an image:

<ul class="mh-menu">
		<a href="#">
			<span>Art Director</span> 
			<span>Henry James</span>
		<img src="images/1.jpg" alt="image01"/>
	<!-- ... -->

We’ll give .mh-menu li a display block and rgba(255,255,255, 0.8) as background color. When we hover over a list item, we’ll color the background into rgba(225,239,240, 0.4) which is a light blue:

.mh-menu li:hover a{
	background: rgba(225,239,240, 0.4);

The second span will also change its color on hover, but we want to change each item into a different color. So, we’ll add a color transition and get each different element with the nth-child selector:

.mh-menu li a span:nth-child(2){
	transition: color 0.2s linear;
.mh-menu li:nth-child(1):hover span:nth-child(2){
	color: #ae3637;
.mh-menu li:nth-child(2):hover span:nth-child(2){
	color: #c3d243;
.mh-menu li:nth-child(3):hover span:nth-child(2){
	color: #d38439;
.mh-menu li:nth-child(4):hover span:nth-child(2){
	color: #8e7463;

The image will slide to the right side, so initially, it will have a left of 0px. We’ll also add a transition for its opacity; it will animate from 0 (initial value) to 1:

.mh-menu li img{
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	opacity: 0;
	transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
.mh-menu li:hover img{
	left: 300px;
	opacity: 1;

And voilΓ , there we have our nice slide out effect!
Make sure, that the z-index of the anchor is set to something higher than the image so that it slides under the anchor and not on top of it.

Alternatively, we can make the background color of the anchor become opaque on hover, i.e. completely white (demo 2), or color each child differently (demo 3).

The illustrations in the demo are by Bartosz Kosowski (CC BY-NC 3.0).

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 52

Comments are closed.
  1. I like very much CSS3! I believe that any moving object on a Web page should be unobtrusive and should not distract the user from the content, and at the same time, they should attract attention. This idea solves these problems. Thank you!

  2. Really nice! CSS transitions were utilized but what about browser compatibility?

  3. I need to ask, why you always use prefix on every tutorial?

    “id=mh-menu? why not just id=menu ?”

    is that generated by an engine?

  4. Wow………
    your new the is pretty good!!!
    I like it.

    How to set the different style in different browser width?
    (Can you understand??I’m taiwanese ,and my English isn’t very well….)