Disappearing menus in IE6 and 7

Question

Hi all, I'm using dropdownplain js from css tricks along with the jquery s3slider on the site www.gwynfryncottages.com, there's an issue with IE6 and IE7 where the menu disappears behind the slideshow on the homepage and the images on the cottages overview page. I've tried a few fixes involving z-index but, as IE already has problems there, nothing seems to work - anyone have any thoughts.

HTML

<div class="badge-box">
<a href="/contact.php" class="badge">Book Now!</a>
</div>

<div id="header">
<a href="index.php"><img src="/images/pixel.gif" width="378" height="31" alt="Welcome to Gwynfryn Farm Cottages" /></a>
</div>

<div id="main-menu">
<ul class="dropdown main-menu-center">

<li><a href="/">Home</a></li>
<li><a href="/cottages.php">Our Cottages</a>
    <ul class="sub_menu">
        <li><a href="/cottages.php">Cottages Overview</a></li>
        <li><a href="/pant-y-onnen.php">Pant-Yr-Onnen</a></li>
        <li><a href="/coach.php">Coach House</a></li>
        <li><a href="/dolcymerau.php">Dolcymerau</a></li>

        <li><a href="/artro.php">Artro</a></li>
        <li><a href="/millers.php">Millers</a></li>
        <li><a href="/granery.php">Granary</a></li>
    </ul>
</li>
<li><a href="/gwynfryn.php">Bed &amp; Breakfast</a></li>
<li><a href="/rates.php">Price Guide</a></li>

<li><a href="/llanbedr.php">Location &amp; Local Attractions</a></li>
<li><a href="/news.php">News &amp; Special Offers</a>
    <ul class="sub_menu">
        <li><a href="/news.php">News/Blog</a></li>
        <li><a href="/special-offers.php">Special Offers</a></li>
    </ul>

</li>
<li><a href="/contact.php">Contact Us</a></li>
</ul>
</div>
<div id="s3slider">
   <ul id="s3sliderContent">
      <li class="s3sliderImage">
          <img src="/gallery/home/dolcymerau.jpg" alt="Dolcymerau Cottage" />
          <span class="right"><strong>Dolcymerau Cottage</strong><br/><br/>Dolcymerau is a single story French style converted barn tucked away in a peaceful courtyard setting beside open fields and enchanting woodlands in the heart of the Snowdonia National Park.</span>
      </li>

      <li class="s3sliderImage">
          <img src="/gallery/home/farm-paddock.jpg" alt="Gwynfryn farm house, Bed &amp; Breakfast" />
          <span class="right"><strong>Gwynfryn Bed &amp; Breakfast</strong><br/><br/>Offers accommodation in a lovingly renovated, comfortably furnished seventeenth century stone farmhouse; set amongst 20 acres of peaceful fields and woodland gardens within the Snowdonia National Park.</span>
      </li>
      <li class="s3sliderImage">
          <img src="/gallery/home/farm-rear.jpg" alt="Gwynfryn farm house, Bed &amp; Breakfast" />
          <span class="right"><strong>Gwynfryn Bed &amp; Breakfast</strong><br/><br/>Offers accommodation in a lovingly renovated, comfortably furnished seventeenth century stone farmhouse; set amongst 20 acres of peaceful fields and woodland gardens within the Snowdonia National Park.</span>

      </li>
      <li class="s3sliderImage">
          <img src="/gallery/home/millers-granary.jpg" alt="Millers Cottage and Granery Cottage" />
          <span class="right"><strong>Millers Cottage and Granery Cottage</strong><br/><br/>Situated within the confines of our original seventeenth century farm estate; surrounded by 20 acres of peaceful fields and woodland gardens.</span>
      </li>
      <li class="s3sliderImage">
          <img src="/gallery/home/pant-y-onnen.jpg" alt="Pant-y-onnen Cottage" />
          <span class="right"><strong>Pant-y-onnen Cottage</strong><br/><br/>This award winning property is located on a hillside offering expansive sea views of the Cambrian coast, Shell Island and the sea.</span>

      </li>
      <li class="clear s3sliderImage">.</li>
   </ul>
</div> 

CSS

/* 
    LEVEL ONE
*/
ul.dropdown                         { position: relative; list-style: none none; }
ul.dropdown li                      { float: left; zoom: 1; background: transparent; }
ul.dropdown a:hover                 { color: #FFFFFF; }
ul.dropdown a:active                { color: #FFFFFF; }
ul.dropdown li a                    { display: block; padding: 4px 8px; color: #FFFFFF; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,                   
ul.dropdown li:hover                { background: #929F11; color: fuchsia; position: relative; }
ul.dropdown li.hover a              { color: #FFFFFF; background: transparent; }


/* 
    LEVEL TWO
*/
ul.dropdown ul                      { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 1; list-style: none none; }
ul.dropdown ul li                   { font-weight: normal; background: #333333; color: #000; border-bottom: none; float: none; }

                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                 { border-right: none; width: 100%; display: inline-block; } 

/* 
    LEVEL THREE
*/
ul.dropdown ul ul                   { left: 100%; top: 0; }
ul.dropdown li:hover > ul           { visibility: visible; }

Answer 1

try edit you css here : added z-index. on IE7 it work, not sure about IE6

.main-menu-center {
    width: 810px;
    height: 35px;
    margin-left: auto;
    margin-right: auto;
    /*background: blue;*/
    z-index:999999;
 }