CSS Examples 
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.
The HTML:
<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>
</div>
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!
Wow! Thats a really nice script CSS Drive!
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.
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!
Really cool looking mouse over effect and vertical menu design. Thanks for the free information.
Health And Wellness
hi
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.
Thanks
Guganathan.G | India
