Web2 Style CSS Dynamic Menu with Arrows and Background-Images

Submitted by n8coder on Mon, 05/04/2009 - 15:37


Just another drop-down menu with web2 style background-images and arrows. We use two background images for < li > elements and two transparent background images(right positioned arrows with different directions) for < a > element. You can optimize background images as reducing width to 1 pixel. I dint use a smaller version, because we need to see images clearly. See demo of css menu.

CSS code of this page:

HTML code of menu elements:

Menu background image:

Hover background image:

Right and down arrows:

You need to look a the css for the menu and change these lines to show that there is no background image.

#cssm1 * li { background: #abc url(bg2.png); }
#cssm1 * li:hover { background: #abc url(bg1.png); }