Menus disparaissant dans IE6 et 7

Question

J'utilise dropdownplain js de css tricks avec le jquery s3slider sur le site www.gwynfryncottages.com, il y a un problème avec IE6 et IE7 où le menu disparaît derrière le diaporama sur la page d'accueil et les images sur la page d'aperçu des chalets. J'ai essayé quelques corrections impliquant z-index mais, comme IE a déjà des problèmes là-bas, rien ne semble fonctionner - quelqu'un a des idées.

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

modifier try vous Css ici: z-index ajouté. sur IE7 ça marche, pas sûr de IE6

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