HTML/jQuery/CSS下拉菜單問題/ Safari

我有一個HTML，CSS和jQuery編碼的下拉菜單，它在Firefox和IE中可以正常工作，但不能在Safari中使用，也不能在Mac上使用Firefox 。HTML/jQuery/CSS下拉菜單問題/ Safari

下拉列表顯示內聯，而不是Safari列表中的下拉列表項。

任何想法爲什麼？

<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>

來源

2011-01-13 mmundiff

如果你可以提供一個樣本鏈接，或者至少可以描述*到底發生了什麼錯誤，這可能會有所幫助。只是說它不起作用幾乎不會告訴人們。 – Pointy 2011-01-13 21:11:24

我認爲你的選擇器在懸停事件上搞砸了。我調試這裏：http://jsfiddle.net/brianflanagan/Spc2M/

基本上我改變 $('ul', this).fadeIn(200);到$(this).find('ul');

希望這有助於。

來源

2011-01-13 21:40:56

HTML/jQuery/CSS下拉菜單問題/ Safari

回答

相關問題