1

我在 IE7 中无法正确悬停子列表时遇到问题。其他浏览器和 IE7 似乎工作正常。

这是网站： 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 &amp; 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 &amp; 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;
}
4

1 回答 1

0

在 HTML 中，标签没有结束标签。在 XHTML 中，标签必须正确关闭。此外，您的链接不再有效。

于 2012-07-23T15:06:04.113 回答