navbar hover problème dans ie7

Question

Je rencontre un problème avec une liste d'enfants ne planant pas correctement dans IE7. D'autres navigateurs et IE7 semblent fonctionner correctement.

Voici le site: http://rattletree.com/index_1.php

Si vous passez la souris sur les barres de navigation, vous verrez la sous-liste en vue venir. Vous pouvez voir que l'image de la flèche n'est pas en dessous de la barre de navigation dans IE7 seulement.

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> 

et 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; 
} 

Answer 1

Dans la balise HTML n'a pas de balise fermante. En XHTML, la balise doit être correctement fermée. En outre, votre lien ne fonctionne plus.