#menu {
float:left;
width:170px;
margin:70px 0 0 0;
}
#menu ul { display: block; }
#menu ul li {
margin:0;
padding:0;
display: block;
float: left;
}
#menu ul li a {
display: block;
text-decoration: none;
}

<div id="menu" >
<ul>
<li><a class="selected" href="home.php"><img src="images/home.png" alt="Home" width="170" height="30" title="Home" /></a></li>
<li><a href="about-us.php"><img src="images/about.png" alt="About Us" width="170" height="30" title="About Us" /></a></li>
<li><a href="about-water.php"><img src="images/water.png" alt="About Water" width="170" height="30" title="About Water"/></a></li>

<li><a href="reverse-osmosis.php"><img src="images/reverse.png" alt="Reverse Osmosis" width="170" height="30" title="Reverse Osmosis"/></a></li>
<li><a href="other-systems.php"><img src="images/systems.png" alt="Other Systems" width="170" height="30" title="Other Systems"/></a></li>
<li><a href="water-filters.php"><img src="images/water_filters.png" alt="Water Filters" width="170" height="30" title="Water Filters"/></a></li>
<li><a href="shower-filters.php"><img src="images/filters.png" alt="Shower Filters" width="170" height="30" title="Shower Filters"/></a></li>
<li><a href="vitamin-shower.php"><img src="images/vitamin.png" alt="Vitamin Shower" width="170" height="30" title="Vitamin Shower"/></a></li>
<li><a href="magnetic-shower.php"><img src="images/magnetic.png" alt="Magnetic Shower" width="170" height="30" title="Magnetic Shower"/></a></li>
<li><a href="tap-filters.php"><img src="images/tap.png" alt="Tap Filters" width="170" height="30" title="Tap Filters"/></a></li>
<li><a href="faucet-light.php"><img src="images/faucet.png" alt="Faucet Light" width="170" height="30" title="Faucet Light"/></a></li>
<li><a href="warranty.php"><img src="images/warranty.png" alt="Warranty" width="170" height="30" title="Warranty"/></a></li>

<!--<li><a href="testimonials.php"><img src="images/testimonials.png" alt="Testimonials" width="170" height="30" title="Testimonials"/></a></li>
<li><a href="products.php"><img src="images/products.png" alt="Products" width="170" height="30" title="Products"/></a></li>-->
<li><a href="contact.php"><img src="images/contact.png" alt="Contact Us" width="170" height="30" title="Contact Us"/></a></li>
</ul>
<!--<a href="warranty.php"><img class="fltlft" style="margin:5px auto 0 30px" src="images/guarantee.jpg" alt="100% Satisfaction Guarantee" width="111" height="67" title="100% Satisfaction Guarantee"/></a>-->
</div>
<!-- end #menu -->

Im using this for on hover events and so on.

#menu ul li a:hover img, #menu ul li a:active img, #menu ul li a:focus img, #menu ul li a.selected img {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity:0.5;
}

Now I need to create a sub menu for one button so the same image 170x30 button flyout to produce three more exact same buttons e.g

Menu1 -> Menu1a
-> Menu1b
-> Menu1c