I have a drop down menu that is coded in HTML, CSS, and jQuery and it works fine in Firefox and IE but not in Safari, and also not in Firefox on Mac.
The drop down displays inline as opposed to list-item for the drop down in Safari.
Any ideas why?
<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 & 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 & Family</a></li>
<li><a href="http://www.penn.museum/podcasts-and-videos/819-secrets-of-the-silk-road.html" rel="external">Podcasts & 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>
I think your selector is messed up on the hover event. I debugged here: http://jsfiddle.net/brianflanagan/Spc2M/
Basically I changed
$('ul', this).fadeIn(200);to$(this).find('ul');Hope this helps.