HTML/jQuery/CSS Drop Down Menu Issue / Safari
Posted
by
mmundiff
on Stack Overflow
See other posts from Stack Overflow
or by mmundiff
Published on 2011-01-13T20:58:28Z
Indexed on
2011/01/13
21:53 UTC
Read the original article
Hit count: 239
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>
© Stack Overflow or respective owner
