1
我在IE7中沒有正確懸停的子列表出現問題。其他瀏覽器和IE7似乎工作正常。ie7中navbar懸停問題
這裏是網站: http://rattletree.com/index_1.php
如果你將鼠標懸停在導航欄,你會看到子列表映入眼簾。您可以看到,箭頭圖像不在IE7中的導航欄下方。
HTML:
<div id="navbar2">
<ul id="navbar">
<li id="index"><a href="index.php">About Rattletree</a></li>
<li id="upcomingshows"><a href="upcomingshows.php">Calendar</a></li>
<li id="booking"><a href="booking.php">Contact</a>
<ul class="innerlist">
<li class="innerlist"><img class="arrowAdjust" src="images/curved_arrow.png"</img><a href="#">Booking Information</a></li>
<li class="innerlist"><a href="#">Press</a></li>
</ul>
</li>
<li id="instruments"><a href="instruments.php">The Band</a>
<ul class="innerlist">
<li class="innerlist"><img class="arrowAdjust" src="images/curved_arrow.png"</img><a href="#">The Instruments</a></li>
<li class="innerlist"><a href="#">The Players</a></li>
</ul>
</li>
<li id="classes"><a href="classes.php">Sights & Sounds</a>
<ul class="innerlist">
<li class="innerlist"><img class="arrowAdjust" src="images/curved_arrow.png"</img><a href="#">Listen</a></li>
<li class="innerlist"><a href="#">Photos</a></li>
<li class="innerlist"><a href="#">Video</a></li>
</ul>
</li>
<li id"classes"><a href="classes.php">Workshops & Classes</a></li>
</ul>
</div>
和css:
/* OUTER LIST STYLING */
div#navbar2 {
position:relative;
width: 100%;
border-top: solid #000 1px;
border-bottom: solid #546F8B 1px;
background-color: #546F8B;
}
div#navbar2 ul#navbar {
padding: 0px;
margin: 10px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
letter-spacing:1px;
color: #FFF;
white-space: nowrap;
display:block;
}
div#navbar2 ul#navbar li {
position:relative;
margin: 0px;
padding:0px;
list-style-type: none;
display:inline;
}
div#navbar2 li a {
text-decoration: none;
color: #fff;
margin:0;
padding: 11px 12px;
}
div#navbar2 li a:link {
color: #FFF:
}
div#navbar2 li a:visited {
color: #ffffff;
}
div#navbar2 li a:hover {
color: #000;
background-color: #FDFFC9;
}
/* INNER LIST STYLING */
div#navbar2 ul#navbar li ul.innerlist{
display: none;
color:#000;
}
div#navbar2 ul#navbar li ul.innerlist li{
color:#000;
}
div#navbar2 ul#navbar li:hover ul.innerlist {
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 30px 0 0px 0px;
padding: 0;
color:#000;
}
div#navbar2 ul#navbar li.innerlist a {
text-decoration: none;
font-weight:bold;
color: #000;
padding: 10px 15px 20px 15px;
margin:0;
}
div#navbar2 li.innerlist a:link {
color: #000:
}
div#navbar2 li.innerlist a:visited {
color: #000;
}
div#navbar2 ul#navbar li.innerlist a:hover {
color: #e62d31;
background-color:transparent;
}
img.arrowAdjust{
padding:0px 0 0 20px;
margin:0;
}
適合我在IE8 – 2010-03-14 05:48:35
gah !!!問題出在IE7上。我一直在來回切換這麼多次,我錯過了... – Joel 2010-03-14 05:58:18