2
我使用css技巧的dropdownplain js以及www.gwynfryncottages.com上的jquery s3slider,IE6和IE7的問題是菜單在主頁上的幻燈片放映後消失,小屋概覽頁面上的圖像。我已經嘗試了一些涉及z-index的修復,但是,因爲IE已經有問題了,似乎沒有任何工作 - 任何人都有任何想法。在IE6和7中消失的菜單
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 & Breakfast</a></li>
<li><a href="/rates.php">Price Guide</a></li>
<li><a href="/llanbedr.php">Location & Local Attractions</a></li>
<li><a href="/news.php">News & 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 & Breakfast" />
<span class="right"><strong>Gwynfryn Bed & 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 & Breakfast" />
<span class="right"><strong>Gwynfryn Bed & 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; }