Two drop down menus, covering each other


I have two separate menu bars (using UL, LI tags).

When I open the upper menu (language menu) it covers the lower menu bar (contact menu). However the lower menu bar can be seen through it.

How can I avoid the Language menu from being transparent (in order to hide the menu under it when opening).

See below photo:

Thank you very much for your help.


Without seeing the code, we can’t help you… though if I were to take a wild guess, I’d say you are using absolute positioning without declaring TOP or LEFT… or you omitted position:relative on the parent LI.

Which would make you like the sixth person attempting to use such a technique I’ve seen on various forums in as many days. Someone out there propagating this broken method or something?

Thanks for your comments. Please see the website here. I wish the html and css are readable enough.


Well, the invalid valign property on the wrapping TD could be a contributing factor.


That it’s a tables for nothing layout (as in even as a tabular layout it’s too many tables) could also be a problem. The pointless DIV, hordes of classes for nothing, etc, etc and I’m actually shocked that even works in ANY browser.

First thing I would to is pitch HALF, maybe MORE than half of the markup on the floor… Basically there is no good reason for the markup for the menu to be more than:

<ul id="mainMenu">
  	<a href="index.php">Home</a>
  	<a href="company.php">Company<span></span></a>
      <li><a href="about.php">About Us</a></li>
      <li><a href="management.php">Management</a></li>
      <li><a href="locations.php">Locations</a></li>
      <li class="last"><a href="employment.php">Employment</a></li>
  	<a href="services.php">Services<span></span></a>
      <li><a href="langservices.php">Language Services</a></li>
      <li><a href="software.php">Software Development</a></li>
      <li><a href="subjectareas.php">Subject Areas</a></li>
      <li class="last"><a href="tools.php">Tools and File Types</a></li>
  	<a href="technology.php">Technology<span></span></a>
      <li><a href="primomanage.php">PrimoManage</a></li>
      <li class="last"><a href="primovoice.php">PrimoVoice</a></li>
  	<a href="solutions.php">Solutions<span></span></a>
  	<a href="contact.php">Contact<span></span></a>
      <li><a href="contactinfo.php">Contact Info</a></li>
      <li><a href="quote.php">Free Quote</a></li>
      <li><a href="feedback.php">Feedback</a></li>
      <li class="last"><a href="panel/">Login</a></li>
<!-- #mainMenu --></ul>

Stripping it down from 2.9k to 1.3k - Of course that will take an all new CSS to make it work.

Given the train wreck of nested table hell that said page is, I HIGHLY recommend you get a from scratch rewrite using modern coding techniques. Right now what you have is the pinnacle of 1998-2001 style coding… That’s not a good thing.

This is evident in using a 19k HTML file to deliver 2k of CDATA and six content images… Which my normal formula for figuring out how big the HTML for a page should be:

1.5k header + CDATA * 1.5 + objects (images/object/embed) * 200 bytes + form inputs * 300 bytes

comes out to 6.3k - I usually round up so there’s little reason for that page to be more than 7k of HTML - meaning well over HALF the markup should be left on the cutting room floor - and it’s mostly the fault of “tables for nothing” and outdated presentational markup.

I wouldn’t even TRY to fix anything else before getting that straightened out first.

Thanks for your time. I really appreciate it.

Removing the VALIGN did not fix the problem.

The complicated menu code is for the graphical borders, active menu line etc. But you are right about the old coding style. That’s because I am an old class designer of that era. After doing my PhD in CS, I did not do much web design.

Now this friend of mine has forced me into doing this myself and I am not that good in CSS. Besides, he likes to have that evil tabbed table, graphical menus, too much logos etc.

I wish I can first fix this problem and then try to cleanup the code and substitute CSS code instead of those tables.

BTW except the problem I mentioned it works well :slight_smile: in IE and Firefox.

Thanks for your time again.

Hi, on the[FONT=monospace] <li>'s you give a z-index of 998, so just give the language dropdown container a 999 index :slight_smile:


This is the rule which you set the 998 zindex

ul.navigation li {
	position: relative;
	z-index: 998;



That fixed the problem :slight_smile:

Thank you VERY much for your help my friend.

Glad it worked :). You’re welcome (though don’t take deathshadow60s comments lightly ;))