submenu position

Please help, I can't get the positioning of my menu working correctly and with Sub-Sub menu

http://aet.inpreview.net/test/


CSS

#menu ul { height:20px; display: block; padding-bottom:8px; margin-bottom:0px; width:940px; position:relative; }
#menu ul.sub-menu { display: none; position: absolute; top: 28px; left: 0px; padding: 10px; z-index: 90; text-align: left; width:300px; }
#menu li:hover ul.sub-menu { display: block; background-color: #000000; color:#ffffff; background-repeat: repeat; width:300px; }



html

<div id="menu">
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Systems">Systems</a>
<ul class="sub-menu">
<li><a href="#" title="AET Flexible Space UFAC">AET Flexible Space UFAC</a></li>
<li><a href="#" title="Solar Hot Water Systems">Solar Hot Water Systems</a></li>
<li><a href="#" title="Solar Cooling">Solar Cooling</a></li>
</ul>
</li>
<li><a href="#" title="Products">Products</a>
<ul class="sub-menu">
<li><a href="#">Air Handling Units</a></li>
<li><a href="#">Fan Terminal Units</a></li>
<li><a href="#">Raised Access Floor</a></li>
<li><a href="#">Solar Thermal Collectors</a></li>
<li><a href="#">Chillers – Absorption Chillers</a></li>
<li><a href="#">Heat Pump Technology</a></li>
</ul>
</li>
<li><a href="#" title="Services">Services</a>
<ul class="sub-menu">
<li><a href="#" title="AET what we offer">AET what we offer </a>
<ul class="sub-menu">
<li><a href="#" title="Design">Design</a></li>
<li><a href="#" title="Supply">Supply</a></li>
<li><a href="#" title="Commissioning">Commissioning</a></li>
<li><a href="#" title="Maintenance">Maintenance</a></li>
</ul>
</li>
<li><a href="#" title="to be developed">to be developed</a>
<ul>
<li><a href="#" title="Offices To Let">Offices To Let</a></li>
<li><a href="#" title="Showsuite / Demo zone">Showsuite / Demo zone</a></li>
<li><a href="#" title="CPD Training">CPD Trainingt</a></li>
<li><a href="#" title="AET Logistics – possibly new domain?">AET Logistics – possibly new domain?</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Projects">Projects</a>
<ul class="sub-menu">
<li><a href="#" title="UFAC">UFAC</a></li>
<li><a href="#" title="UFAC">Solar</a></li>
</ul>
</li>
<li><a href="#" title="Contact">Contact</a>
<ul class="sub-menu">
<li><a href="#" title="Office location map">Office location map</a></li>
<li><a href="#" title="Distributor">Distributor</a></li>
<li><a href="#" title="Personnel">Personnel</a></li>
</ul>
</li>
</ul>

Try removing the height from #menu ul and adding z-index: 1;

Also remove z-index from #menu ul.sub-menu.

This solved the z-index problem.

By the way, the code you posted doesn't provide all the CSS required to recreate your menu, there are other styles not present. It would be much easier to find any other problems if you provide them.

I don't fancy searching through all your external stylesheets to find them myself.