HTML/jQuery/CSS Menu déroulant Problème/Safari

J'ai un menu déroulant qui est codé en HTML, CSS et jQuery et ça fonctionne très bien dans Firefox et IE mais pas dans Safari, et aussi pas dans Firefox sur Mac .HTML/jQuery/CSS Menu déroulant Problème/Safari

La liste déroulante s'affiche en ligne par opposition à l'élément de liste pour la liste déroulante dans Safari.

Des idées pourquoi?

<html> 

<head> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 

<script type="text/javascript" > 

$(document).ready(function(){ 
     $('#menu li').hover(
      function() { 
       //$('ul', this).css('display', 'block'); 
       $('ul', this).fadeIn(200); 
       var src = $('img.item', this).attr('src').match(/[^\.]+/) + '_over.png'; 
       $('img.item', this).attr('src', src); 
      }, 
      function() { 
       //$('ul', this).css('display', 'none'); 
       $('ul', this).fadeOut(350); 
       var src = $('img.item', this).attr('src').replace('_over', ''); 
       $('img.item', this).attr('src', src); 
      }); 
}); 

</script> 
<style type="text/css"> 
    /* General */ 
    body { arial, sans-serif; background-color: white; } 
    * { padding: 0; margin: 0; } 



    #menu{ 
    white-space:nowrap; 
    list-style:none; 
    margin-left: 1px; 
    } 
    #menu ul { 
    list-style: none; 
    position:absolute; 
    left:0; 
    display:none; 
    margin:0 -3px 0 -1px; 
    padding:0; 
    background: #000000; 
    z-index: 500; 
    margin-top: -4px; 
    } 

    #menu li{ 
    display:inline; 
    float: left; 
     /* Added */ 
    position:relative; 
    } 

    #menu li a { 
    display: block; 
    } 

    #menu ul li { 
    width:116px; 
    float:left; 
    border-top:1px dotted #666666; 
    display: block; 
    } 

    #menu li ul { 
    display: none; 
    border-top: 1px black solid; 
    text-align: left; 
    } 

    #menu ul a:hover { 
    text-decoration:none; 
    background: #efda83; 
    color: #000000; 
    } 

    #menu ul a { 
    text-decoration:none; 
    display:block; 
    height:15px; 
    padding: 8px 5px; 
    color:#efda83; 
    font-size: 12px; 
    } 




    img{ 
    border: 0 none; 
    } 

    .clear{ 
    clear: both; 
    } 


</style> 



</head> 


<body> 

    <div> 
      <ul id="menu"> 
      <li ><a href="index.php"><img src="images/ssr_nav_home.png" class="item" alt="Home" /></a> </li> 

      <li ><a href="about.php"><img src="images/ssr_nav_about.png" class="item" alt="About" /></a> 
       <ul> 
        <li><a href="about_contributors.php">Contributors</a></li> 
        <li><a href="about_behind.php">Behind the Exhibit</a></li> 
        <li><a href="about_sponsors.php">Sponsors</a></li> 
       </ul> 
       <div class="clear"></div> 

      </li> 

      <li ><a href="exhibit_intro.php"><img class="item" src="images/ssr_nav_exhibit.png" alt="Exhibit" /></a> 
       <ul> 
        <li><a href="exhibit_intro.php">Intro</a></li> 
        <li><a href="exhibit_silkroad.php">Silk Road</a></li> 
        <li><a href="exhibit_western_regions.php">Western Regions</a></li> 
        <li><a href="exhibit_daily_life.php">Daily Life</a></li> 
        <li><a href="exhibit_burial_practices.php">Burial Practices</a></li> 
        <li><a href="exhibit_relevance.php">Relevance</a></li> 
       </ul> 
       <div class="clear"></div> 
      </li> 

      <li ><a href="visit.php"><img class="item" src="images/ssr_nav_visit.png" alt="Visit" /></a> 
       <ul> 
        <li><a href="visit_tickets.php">Tickets</a></li> 
        <li><a href="visit_specials.php">Special Offers</a></li> 
        <li><a href="visit_tours.php">Tours</a></li> 
        <li><a href="visit_groups.php">Groups</a></li> 
       </ul> 
       <div class="clear"></div> 
      </li> 

      <li ><a href="events.php"><img class="item" src="images/ssr_nav_events.png" alt="Events" /></a> 
       <ul> 
        <li><a href="events_lectures.php">Lecture Series</a></li> 
        <li><a href="events_symposium.php">Symposium</a></li> 
        <li><a href="kids_and_family.php">Kids &amp; Family</a></li> 
        <li><a href="events_calendar.php">Event Calendar</a></li> 
       </ul> 
       <div class="clear"></div> 
      </li> 

      <li ><a href="gallery.php"><img class="item" src="images/ssr_nav_images.png" alt="Gallery" /></a></li> 

      <li ><a href="resources.php"><img class="item" src="images/ssr_nav_resources.png" alt="Resources" /></a> 
       <ul> 
        <li><a href="resources_teachers.php">For Teachers</a></li> 
        <li><a href="kids_and_family.php">Kids &amp; Family</a></li> 
        <li><a href="http://www.penn.museum/podcasts-and-videos/819-secrets-of-the-silk-road.html" rel="external">Podcasts &amp; Videos</a></li> 
       <!-- <li><a href="map.php">Silk Road Map</a></li> 
        <li><a href="resources_timeline.php">Timeline</a></li> --> 
        <li><a href="resources_quiz.php">Quiz</a></li> 
        <li><a href="glossary.php">Glossary</a></li> 
        <li><a href="blogs.php">Blog</a></li> 
       </ul> 
       <div class="clear"></div> 
      </li> 

      <li ><a href="press.php"><img class="item" src="images/ssr_nav_press.png" alt="Press" /></a> 
       <ul> 
        <li><a href="press_release.php">Press Release</a></li> 
        <li><a href="press_images.php">Press Images</a></li> 
        <li><a href="press_bloggers.php">Bloggers</a></li> 
       </ul> 
       <div class="clear"></div> 
      </li> 

     </ul> 

     </div> 

</body> 



</html>

Source

2011-01-13 mmundiff

Il pourrait être utile de fournir un lien vers un échantillon, ou à tout le moins * décrire * ce qui ne va pas. Le simple fait de dire que ça ne marche pas ne dit presque rien aux gens. – Pointy

Je pense que votre sélecteur est fautif sur l'événement hover. Je débogués ici: http://jsfiddle.net/brianflanagan/Spc2M/

Fondamentalement, je changé $('ul', this).fadeIn(200);-$(this).find('ul');

Hope this helps.

Source

2011-01-13 21:40:56

HTML/jQuery/CSS Menu déroulant Problème/Safari

Répondre

Questions connexes