Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
CSS Library
CSS Layouts

CSS Library: Vertical CSS Menus: Here

Arrow Green Vertical Menu

Author: Ian Main (with changes by Dynamic Drive)

Arrow Green Menu is a vertical list based menu that uses a single background image to create 3 distinct states, by shifting the image vertically to reveal a different style. The last state is user applied, by giving the desired element a CSS class of ".selected".


Single image used (two flavors):

The CSS:

Note: The image path referenced in the CSS above assumes you're using the first green image. If you're using the second, be sure to update the image path accordingly.


Code Info

Rate this code:

Date Posted: 09/15/2008

Revision History: None

Usage Terms: Click here

Your Comments (35)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 2 of 4 pages  <  1 2 3 4 >

thanks Del with a:active works!! instead of a.selected
Posted by van on 11/06, 06:17 PM
Juli, you have to change in the css the following:
background: transparent url("here comes the path where you have saved the background image") 100% 0;
Posted by van on 11/06, 06:21 PM
Anyone know how to fix this menu in firefox?
Posted by niki on 12/12, 06:16 AM
I feel like a moron, but I cannot get this to work. The image does not display, I've tried various ways of changing this path
background: transparent url("here comes the path where you have saved the background image")
and nothing works. Any more pointers?
Posted by Adam on 12/17, 02:12 PM
Dont feel like a moron Adam, it doesn,t work for me either and like you I have amended as requested.
Posted by Fred on 12/21, 10:21 AM
I'm the same as Juli. Copy/paste but no background colour.
Posted by Gerry Abrahams on 01/10, 03:40 AM
(Possible) solution for the background not appearing.
I am using apache and IE7.
My website looks like

(with this menu in index.html, and the styles in style.css).
In order to get hte image I had to set the background entry to :
backgroundtransparent url(../media/arrowgreen.gif1000

Note the ../ before the media directory
Posted by Kenneth Beaton on 01/22, 09:28 PM
Hi!!!everyone can somebody tutor me in all programming language specially java and CSS..

thank you!!!

hope yuo can help me.
Posted by Reneboy on 01/23, 06:57 PM
hi everyone..can somebody tutor me in all programming language.

thank you

hope you can help me.

i have small backgrounds of programming
Posted by Reneboy on 01/23, 06:59 PM
I'm using this CSS for this site: and I've put the ul in an include file.
Since it's in the include file, I can't assign the .selected class individually, of course.
So I've tried a billion different things to get each page to display like it would if it had the class of "selected", to no avail.

Here's what's on there now, on the "50+ Fitness Club" page:
<style type="text/css" media="screen">
arrowgreen li a.50plus {color#7c9a61;background-position: 100% -64px;}

...and this in the body:
<div class="arrowgreen">
#include virtual="/includes/navul.htm"-->

...and the include contains this:
li><a href="private.html" class="private">PRIVATE TRAINING</a></li>
li><a href="50plus.html" class="50plus">50FITNESS CLUB</a></li>  
li><a href="cqa.html" class="cqa">CLOSE QTRMARTIAL ARTS</a></li
li><a href="womens.html" class="womens">WOMEN'S SELF DEF. CAMP</a></li> 
<li><a href="info.html" class="info">ALL LOCATIONS AND TIMES</a></li> 
<li><a href="enlist.html" class="enlist">ENLIST ONLINE</a></li>
<li><a href="gear.html" class="gear">COLONEL'
S CAMP GEAR</a></li>
li><a href="videos.html" class="videos">VIDEOS</a></li>
li><a href="uscqc.html" class="uscqc">USCQC</a></li
li><a href="faq.html" class="faq">FREQASKED QUESTIONS</a></li>
li><a href="instructors.html" class="instructors">MEET THE INSTRUCTORS</a></li>
li><a href="becomeinstructor.html" class="becomeinstructor">BECOME AN INSTRUCTOR</a></li>
li><a href="testimonials.html" class="testimonials">TESTIMONIALS</a></li
li><a href="contact.html" class="contact">CONTACT US</a></li
li><a href="index.html">HOME</a></li>

Thanks in advance
Posted by Geezer on 02/02, 08:31 PM

Comment Pages 2 of 4 pages  <  1 2 3 4 >

Commenting is not available in this weblog entry.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.