Question

我在网站www.gwynfryncottages.com上使用来自css技巧的dropdownplain js以及jquery s3slider，IE6和IE7的问题是主页上的幻灯片显示后菜单消失以及小屋图片概述页。我已经尝试了一些涉及z-index的修复，但由于IE已经存在问题，似乎没有任何工作 - 任何人都有任何想法。

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

尝试编辑你的css：添加了z-index。在IE7上它工作，不确定IE6

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

IE6和7中消失的菜单

1 个答案: