HTML/jQuery/CSS Dropdown-Menü Problem/Safari

Ich habe ein Dropdown-Menü, das in HTML, CSS und jQuery codiert ist und es funktioniert in Firefox und IE aber nicht in Safari und auch nicht in Firefox auf Mac .HTML/jQuery/CSS Dropdown-Menü Problem/Safari

Das Drop-down-Menü wird im Gegensatz zum Listenelement für das Dropdown in Safari inline angezeigt.

Irgendwelche Ideen warum?

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

Quelle

2011-01-13 mmundiff

Es könnte hilfreich sein, wenn Sie einen Link zu einer Probe bereitstellen oder zumindest * beschreiben * was genau falsch läuft. Zu sagen, dass es nicht funktioniert, sagt den Leuten fast nichts. – Pointy

Ich denke, Ihre Auswahl ist auf dem Hover-Ereignis durcheinander. Ich gedebuggt hier: http://jsfiddle.net/brianflanagan/Spc2M/

Grundsätzlich änderte ich $('ul', this).fadeIn(200);-$(this).find('ul');

Hoffnung, das hilft.

Quelle

2011-01-13 21:40:56

HTML/jQuery/CSS Dropdown-Menü Problem/Safari

Antwort

Verwandte Themen