...

View Full Version : submenu position



jarv
05-22-2012, 11:42 AM
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>

dan-dan
05-22-2012, 12:29 PM
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.

dan-dan
05-22-2012, 12:37 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum