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:

<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:

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); }

Add new comment