Question

我有一个用HTML，CSS和jQuery编码的下拉菜单，它在Firefox和IE中运行良好，但在Safari中没有，在Mac上也没有。

下拉列表显示内联，而不是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>

Answer 1

我认为您的选择器在悬停事件中搞砸了。我在这里调试：http://jsfiddle.net/brianflanagan/Spc2M/

基本上我改变了 $('ul', this).fadeIn(200);至$(this).find('ul');

希望这有帮助。

HTML / jQuery / CSS下拉菜单问题/ Safari

1 个答案: