IE 7/8 CSS Menu Problem

Question

I'm having a weird problem with my CSS drop down menu. It shows up, but it's hidden behind another element, and there is a growing space between the list items.

CSS code is pretty standard:

/*CSS Menu*/
#navigation li.menu ul
{
    visibility: hidden;
    position: absolute;
    top: 40px;
    right: 5px;
    height: 15px;
    padding-top: 10px;
}
#navigation li.menu:hover ul
{
    visibility: visible;
}
#navigation li.menu ul li
{
    border: 1px solid gray;
    border-top: none;
    border-bottom: 1px dotted #ccc;
    z-index: 999999;
    position: relative;
}
#navigation li.menu ul > li > a
{
    padding: 2px 5px 2px 5px;
    background-color: blue;
    text-align: right;
    display: block;
    color: black;
    background: white;
}
#navigation li.menu ul li a:hover
{
    color: white;
    background: #ccc;
}
#navigation li.menu ul li a:visited
{
    color: black;
}

As is the IE Fix code:

#navigation li.menu ul li
{
    border: 1px solid gray;
    border-top: none;
    border-bottom: 1px dotted #ccc;
    z-index: 999999999;
    position: relative;
    background-position: 0 0;
}
#navigation li.menu ul > li > a
{
    padding: 2px 5px 2px 5px;
    background-color: blue;
    text-align: right;
    display: block;
    color: black;
    background: white;
}

HTML Code for the Menu:

<code>
  <div id="navigation" style="border: 0px solid #000; float: right;">
    <ul >
      <li class="top"><a href="index.php"><span class="left"></span><span class="right">Home</span></a></li>
      <li class="top"><a href="storage.php"><span class="left"></span><span class="right">Storage</span></a></li>
      <li class="top"><a href="advertiser-info.php"><span class="left"></span><span class="right">Advertisers</span></a></li>
      <li class="top"><a href="supplies.php"><span class="left"></span><span class="right">Supplies</span></a></li>
      <li class="top"><a href="franchise-opportunities.php"><span class="left"></span><span class="right">Franchise Opportunities</span></a></li>
      <li class="menu top"><a href="about-us.php"><span class="left"></span><span class="right">About Us</span></a>    
        <ul>
          <li><a href="./contact-us.php">Contact Us</a></li>
          <li><a href="./history.php">Company History</a></li>
          <li><a href="./guarantee.php">Customer Guarantee</a></li>
          <li><a href="./faq.php">FAQ</a></li>  
        </ul>
      </li>
    </ul>
  </div>
</code>

Answer 1

It depends on what the other element is and the rest of the DOM elements surrounding this div block.

If it is a flash element then you may need to use Javascript to keep that flash element from hiding the CSS drop down.

Also, check the styles for the rest of your DOM elements to make sure none of them are set to float. Sometime floating objects can cause that as well.

Sorry, it is hard to get more specific. I copied your code and made a quick HTML page with only that div block and the CSS you pasted and looking at it in Firefox there are no spaces, growing or otherwise, and the drop down is on a layer above the main menu. All seems normal.

Firefox version: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729)

Edit: Is this a problem in IE7/8 only?

Answer 2

In IE8, the code sample you supply works as expected - the pop-up menu is displayed on top of the static menu.

In Firefox, it's a similar story except that the bullets are outside of the white-background, so they look messy on top of the static menu text.