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 1 of 4 pages  1 2 3 >  Last »

Posted by JaySkagnetti on 09/17, 05:49 PM
Would love to see these in different colors, or an attached .ai or .psd so we can edit our own colors.
Great work!
Posted by CedarTree on 09/18, 01:34 AM
very very nice but if two line links?
Posted by web tasarimi on 09/23, 04:22 AM
When I tried this everything worked but the selected position. What did I do wrong? Here is my CSS:

.arrowgreen li a.selected{
color: #26370A;
background-position: 100% -64px;

Posted by brian on 09/27, 07:29 PM
I had to put an !important in that css code because I had conflicts with other CSS classes in my stylesheet where the position in this element was being overridden once I inserted this menu into my page.

Just a total shot in the dark, but it worked for me...

.arrowgreen li a.selected
color: #26370A !important;
background-position: 100% -64px !important;

Posted by JaySkagnetti on 10/01, 02:29 PM
Posted by Luigi on 10/05, 02:45 PM
I'm using various styles from this site in my project.
Tank you for these.
My site is seuguiadecidades dot com dot br
Posted by Vinicius Brasil) on 10/06, 08:42 PM
what i can't understand was this code:
.arrowgreen li a.selected{
background-position100% -64px;

why it didn't use a:active instead?
Posted by Dels on 10/28, 11:15 PM
Can i use your code at my blog ?
Posted by Glubina on 10/29, 07:20 AM
I tried this one, but it didnīt work out, it doesnīt show the background green image... What did I do wrong? I made the simple "copy-paste" job!
Posted by Juli on 10/30, 03:38 AM

Comment Pages 1 of 4 pages  1 2 3 >  Last »

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