Databases
StackOverflow2013
Postsdbo
POHTML/jQuery/CSS Drop Down Menu Issue / Safari
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML/jQuery/CSS Drop Down Menu Issue / Safari
    text
    copied!<p>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.</p> <p>The drop down displays inline as opposed to list-item for the drop down in Safari.</p> <p>Any ideas why?</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" &gt; $(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); }); }); &lt;/script&gt; &lt;style type="text/css"&gt; /* 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; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;ul id="menu"&gt; &lt;li &gt;&lt;a href="index.php"&gt;&lt;img src="images/ssr_nav_home.png" class="item" alt="Home" /&gt;&lt;/a&gt; &lt;/li&gt; &lt;li &gt;&lt;a href="about.php"&gt;&lt;img src="images/ssr_nav_about.png" class="item" alt="About" /&gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="about_contributors.php"&gt;Contributors&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="about_behind.php"&gt;Behind the Exhibit&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="about_sponsors.php"&gt;Sponsors&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/li&gt; &lt;li &gt;&lt;a href="exhibit_intro.php"&gt;&lt;img class="item" src="images/ssr_nav_exhibit.png" alt="Exhibit" /&gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="exhibit_intro.php"&gt;Intro&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="exhibit_silkroad.php"&gt;Silk Road&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="exhibit_western_regions.php"&gt;Western Regions&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="exhibit_daily_life.php"&gt;Daily Life&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="exhibit_burial_practices.php"&gt;Burial Practices&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="exhibit_relevance.php"&gt;Relevance&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/li&gt; &lt;li &gt;&lt;a href="visit.php"&gt;&lt;img class="item" src="images/ssr_nav_visit.png" alt="Visit" /&gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="visit_tickets.php"&gt;Tickets&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="visit_specials.php"&gt;Special Offers&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="visit_tours.php"&gt;Tours&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="visit_groups.php"&gt;Groups&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/li&gt; &lt;li &gt;&lt;a href="events.php"&gt;&lt;img class="item" src="images/ssr_nav_events.png" alt="Events" /&gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="events_lectures.php"&gt;Lecture Series&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="events_symposium.php"&gt;Symposium&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="kids_and_family.php"&gt;Kids &amp;amp; Family&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="events_calendar.php"&gt;Event Calendar&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/li&gt; &lt;li &gt;&lt;a href="gallery.php"&gt;&lt;img class="item" src="images/ssr_nav_images.png" alt="Gallery" /&gt;&lt;/a&gt;&lt;/li&gt; &lt;li &gt;&lt;a href="resources.php"&gt;&lt;img class="item" src="images/ssr_nav_resources.png" alt="Resources" /&gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="resources_teachers.php"&gt;For Teachers&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="kids_and_family.php"&gt;Kids &amp;amp; Family&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.penn.museum/podcasts-and-videos/819-secrets-of-the-silk-road.html" rel="external"&gt;Podcasts &amp;amp; Videos&lt;/a&gt;&lt;/li&gt; &lt;!-- &lt;li&gt;&lt;a href="map.php"&gt;Silk Road Map&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="resources_timeline.php"&gt;Timeline&lt;/a&gt;&lt;/li&gt; --&gt; &lt;li&gt;&lt;a href="resources_quiz.php"&gt;Quiz&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="glossary.php"&gt;Glossary&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="blogs.php"&gt;Blog&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/li&gt; &lt;li &gt;&lt;a href="press.php"&gt;&lt;img class="item" src="images/ssr_nav_press.png" alt="Press" /&gt;&lt;/a&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="press_release.php"&gt;Press Release&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="press_images.php"&gt;Press Images&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="press_bloggers.php"&gt;Bloggers&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div class="clear"&gt;&lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload