<div id="navMenu">
<ul>
<li><a href="test.html">item 1</a></li>
<li><a href="test.html">item 2</a></li>
<li><a href="test.html">item 3</a></li>
<li><a href="test.html">item 4</a>
<ul>
<li><a href="test.html">sub item 1</a></li>
<li><a href="test.html">sub item 2</a></li>
<li><a href="test.html">sub item 3</a></li>
<li><a href="test.html">sub item 4</a>
<ul>
<li><a href="test.html">sub sub item 1</a></li>
<li><a href="test.html">sub sub item 2</a></li>
</ul></li>
<li><a href="test.html">sub item 5</a></li>
</ul></li>
<li><a href="test.html">item 5</a></li>
<li><a href="test.html">item 6</a></li>
<li><a href="test.html">item 7</a></li>
</ul>

/* main */
#navMenu ul {
list-style: none;
margin: 0;
padding: 0;
}
#navMenu {
width: 150px;
}
#navMenu li {
display:inline;
}

/* menu */
#navMenu li a:link, #navMenu li a:visited {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none;
font-size: 0.6em;
font-weight: bold;
color: White;
height: 12px;
display: block;
background: url(bckMenu.gif);
padding: 5px 0 6px 20px;
}
#navMenu li a:hover {
color: #ACD373;
background: url(bckMenu.gif) 0 -23px;
padding: 5px 0 6px 20px;
}

/* subMenu */
#navMenu li li a:link, #navMenu li li a:visited {
font-weight: normal;
background: url(bckSubMenu.gif);
padding: 2px 0 3px 30px;
}
#navMenu li li a:hover {
background: url(bckSubMenu.gif) 0 -17px;
padding: 2px 0 3px 30px;
}

/* subSubMenu */
#navMenu li li li a:link, #navMenu li li li a:visited {
background: url(bckSubSubMenu.gif);
padding: 0 0 1px 40px;
}
#navMenu li li li a:hover {
background: url(bckSubSubMenu.gif) 0 -13px;
padding: 0 0 1px 40px;
}