Web2 Style CSS Dynamic Menu with Arrows and Background-Images

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:

<style type="text/css">
body { padding: 3em; }

#cssm1 { position: absolute;  z-index: 99; margin: 0 auto; line-height: 20px; }

#cssm1 *  { padding:0; margin: 0; font: 1em arial; }

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



#cssm1 a { display: block; border: 1px solid #fff;  text-decoration: none; padding: 3px 10px; }
#cssm1 a:hover {  }


#cssm1 ul li, #cssm1 ul li ul li  { width: 120px; list-style-type:none; }

#cssm1 ul li { float: left; width: 120px; }

#cssm1 ul li ul, #cssm1:hover ul li ul, #cssm1:hover ul li:hover ul li ul{ 
	display:none;
	list-style-type:none; 
	width: 120px;
	}

#cssm1:hover ul, #cssm1:hover ul li:hover ul, #cssm1:hover ul li:hover ul li:hover ul { 
	display:block; 
	}

#cssm1:hover ul li:hover ul li:hover ul { 
	position: absolute;
	margin-left: 120px;
	margin-top: -20px;
	}

#cssm1 a.arrow_down { 
	background: url(arrow_down.png) no-repeat;
	background-position: right;
	}
	
#cssm1 a.arrow_right { 
	background: url(arrow_right.png) no-repeat;
	background-position: right;
	}

</style>

HTML code of menu elements:

<div id="cssm1">
	<ul>
		<li><a href="http://www.cafewebmaster.com">Home</a></li>
		<li><a href="#" class="arrow_down">Design</a>
				<ul>
				<li><a href="#">Graphics</a></li>
				<li><a href="#" class="arrow_right">Themes</a>
					<ul>
						<li><a href="#">Joomla</a>
						<li><a href="#">Drupal</a>
						<li><a href="#">Wordpress</a>
					</ul>
				</li>
			</ul>
		
		</li>
		<li><a href="#">Download</a></li>
		<li><a href="#" class="arrow_down">Menus</a>
			<ul>
				<li><a href="#">Javascript</a></li>
				<li><a href="#">Java</a></li>
				<li><a href="#">Flash</a></li>
				<li><a href="#" class="arrow_right">CSS</a>
					<ul>
						<li><a href="#">Left Menu</a>
						<li><a href="#">DropDown</a>
						<li><a href="#">Startmenu</a>
						<li><a href="#">Right Menu</a>
						<li><a href="#">Bottom Menu</a>
						<li><a href="#">Hidden Menu</a>
						<li><a href="#">...</a>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Contact</a></li>
		<li><a href="#">...</a></li>
		
	</ul>
</div>

Menu background image:

Hover background image:

Right and down arrows: