Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question 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
    Code:
    #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
    Code:
    <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>

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    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.

  • #3
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •