CSS Examples CSS Drive vertical menu links

Date: 09/14/2004 CSS Drive vertical menu links

Author: CSS Drive

Vertical menu links with an image rollover, achived by changing its background image. The height of each link here is deliberately set to be shorter than that of its background image, which can create an interesting clipping effect depending on the image used.


<div class="menulist">
<a href="http://www.cssdrive.com">Home</a> <a href="http://www.cssdrive.com/index.php/main/submit/">Submit</a> <a href="http://www.cssdrive.com/index.php/main/resources/">Resources</a> <a href="http://www.cssdrive.com/index.php/main/contact/">Contact</a>

The CSS:

.menulist a{

color: black;
display: block;
width: 170px;
height: 20px;
padding-left: 5px;
padding-top: 1px;
margin-bottom: 5px;
background-image: url(menu.jpg);
background-repeat: no-repeat;
background-position: left top;
text-decoration: none;
font-weight: bold;

.menulist a:hover{
background-image: url(menuover.jpg);

Images used:

Comments (6)

Thank you for helping make CSS a bit more accessible!

#1: Gran on 09/15 at 11:34 PM

Wow! Thats a really nice script CSS Drive!

#2: Asif Shahidullah on 10/24 at 02:33 PM

As a matter of fact, one can make something better than the example above, using CSS - please see the submitted link. Just use CSS and state cell borders. That's it.

#3: Leo Mouse on 04/09 at 04:46 AM

This works great in a REAL browser. Unfortunately, IE does not cache background images so you get the annoying flash due to the downloading of the over background image. Till the rest of the browser world gets in CSS compliance there is something you can do to avoid the flashie thingie...

Make a single image with both the ‘menu.jpg’ and ‘menuover.jpg’ (one on top of the other). Name it ‘menu.jpg’. Change the ‘a:hover’ image to the new ‘menu.jpg’ image then add the following to the ‘.menulist a:hover’ class:

background-position: left bottom;

You will only download the one image and on mouse over, change the view from the top left of the image to the bottom left. Since we are only seeing 20px of the image at a time, the mouse over works, no flash.

Going one step further, encapsulate all link tags in an unordered list. This gets rid of another IE problem with IE not using the margin settings on ‘a:hover’. It also will make the menu more manageable in terms of positioning and segregation. See 'Markerless and "no indent" Lists' in 'Examples' regarding unordered lists.

Have fun!

#4: Sarcastic Shrub on 06/22 at 04:28 PM

Really cool looking mouse over effect and vertical menu design. Thanks for the free information.
Health And Wellness

#5: Kendra on 01/15 at 11:39 AM

i m working on a vertical menu which has a nice background which blends with the website design.
the sample worked out here wont help me. is there a way around to do using css.
any help is appreciated.

Guganathan.G | India

#6: Guganathan on 07/30 at 07:51 AM
Commenting is not available in this weblog entry.

Partners & ResourcesOur

CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site