I have a CSS menu for a website I'm working on. I've tweaked it to the point where it does exactly what I want it to do on Firefox, Chrome, and an old version of Safari. However, in the newest version of Safari (6.0.2 on Lion), something weird happens. If I let the page load completely and then hover over the menu, the menu functionality does not work. However, if I hover over the menu while the page is loading, it works just fine! This was driving me crazy until I figured out the pattern. Well, it's still driving me crazy I suppose. This errant behavior seems to affect only the newest Safari and I cannot figure out how to fix it. I've tried commenting out other CSS files that I've thought might be conflicting with it. The problem probably relates to the fact that I'm using iWeb to generate the initial HTML and then I'm editing the HTML to add the menu and editing the CSS to add the menu functions & styling.
I'm actively working on the code, so this page will likely change, but here is the page I'm having problems with (with my edits). Note, many of the menu items don't have pages made for them yet:
http://rhythmshuffle.com/dev/2013/robversion1/RS2013/About.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
<link rel="shortcut icon" href="/favicon.ico" />
<link href="/menu_assets/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald">
<meta name="viewport" content="width=960" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Generator" content="iWeb 3.0.4" />
<meta name="iWeb-Build" content="local-build-20130209" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="viewport" content="width=960" />
<title>About</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="About_files/About.css" />
<!--[if lt IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='About_files/AboutIE.css'/><![endif]-->
<!--[if gte IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Media/IE8.css'/><![endif]-->
<style type="text/css">
/*<![CDATA[*/
@import "Scripts/Widgets/HTMLRegion/Paste.css";
/*]]>*/
</style>
<script type="text/javascript" src="Scripts/iWebSite.js"></script>
<script type="text/javascript" src="Scripts/iWebImage.js"></script>
<script type="text/javascript" src="Scripts/iWebMediaGrid.js"></script>
<script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"> </script>
<script type="text/javascript" src="Scripts/Widgets/HTMLRegion/Paste.js"></script>
<script type="text/javascript" src="About_files/About.js"></script>
</head>
<body style="background: rgb(125, 133, 135); margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
<div style="text-align: center; ">
<div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: rgb(165, 183, 156); text-align: left; width: 960px; " id="body_content">
<div style="float: left; margin-left: 0px; position: relative; width: 960px; z-index: 0; " id="nav_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="clear: both; height: 0px; line-height: 0px; " class="spacer"> </div>
</div>
<div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 960px; z-index: 10; " id="header_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
<div style="margin-left: 0px; position: relative; width: 960px; z-index: 5; " id="body_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="height: 11px; width: 648px; height: 0px; left: 272px; position: absolute; top: 81px; width: 648px; z-index: 1; " class="tinyText shadow_0">
<div style="position: relative; width: 648px; ">
<img src="About_files/shapeimage_1.jpg" alt="" style="height: 11px; left: 0px; margin-top: -5px; position: absolute; top: 0px; width: 648px; " />
</div>
</div>
<div style="height: 245px; width: 199px; height: 245px; left: 41px; position: absolute; top: 639px; width: 199px; z-index: 1; " class="tinyText style_SkipStroke stroke_0" id="id1">
<img src="About_files/spiralonly.png" alt="" style="border: none; height: 245px; width: 200px; " />
</div>
<div style="height: 437px; width: 356px; height: 437px; left: 582px; position: absolute; top: 77px; width: 356px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 356px; ">
<img src="About_files/shapeimage_2.png" alt="" style="height: 437px; left: 0px; position: absolute; top: 0px; width: 356px; " />
</div>
</div>
<div style="height: 50px; width: 462px; height: 50px; left: 504px; position: absolute; top: 922px; width: 462px; z-index: 1; " class="tinyText style_SkipStrokeSkipFillSkipOpacity shadow_1">
<div style="position: relative; width: 462px; "></div>
</div>
<div id="id2" style="height: 371px; left: 0px; position: absolute; top: 898px; width: 960px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
<div class="text-content graphic_shape_layout_style_default_External_960_371" style="padding: 0px; ">
<div class="graphic_shape_layout_style_default"></div>
</div>
</div>
<div class="tinyText" style="height: 75px; left: 589px; position: absolute; top: 901px; width: 364px; z-index: 1; ">
<img usemap="#map1" id="shapeimage_3" src="About_files/shapeimage_3.png" style="border: none; height: 82px; left: -6px; position: absolute; top: -4px; width: 374px; z-index: 1; " alt="brought to you by SwingBuffalo.com winner of Buffalo Spree’s 2011 “Best Dance Lessons”" title="" /><map name="map1" id="map1"><area href="http://SwingBuffalo.com/" title="http://SwingBuffalo.com/" onmouseover="IMmouseover('shapeimage_3', '0');" alt="http://SwingBuffalo.com/" onmouseout="IMmouseout('shapeimage_3', '0');" shape="rect" coords="252, 8, 366, 28" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" /></map><img style="height: 20px; left: 246px; position: absolute; top: 4px; width: 114px; " id="shapeimage_3_link_0" alt="shapeimage_3_link_0" src="About_files/shapeimage_3_link_0.png" />
</div>
<div style="height: 164px; width: 164px; height: 164px; left: 57px; position: absolute; top: 4px; width: 164px; z-index: 1; " class="tinyText style_SkipStroke_2 stroke_0">
<a href="Home.html" title="Home.html"><img src="About_files/RS_Logo_small.png" alt="" style="border: none; height: 164px; width: 164px; " /></a>
</div>
<div style="height: 7px; width: 969px; height: 0px; left: -4px; position: absolute; top: 880px; width: 969px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 969px; ">
<img src="About_files/shapeimage_4.jpg" alt="" style="height: 7px; left: 0px; margin-top: -3px; position: absolute; top: 0px; width: 969px; " />
</div>
</div>
<div class="com-apple-iweb-widget-HTMLRegion" id="widget0" style="height: 344px; left: 15px; opacity: 1.00; position: absolute; top: 906px; width: 607px; z-index: 1; ">
<script type="text/javascript"><!--//--><![CDATA[//><!--
var widget0_htmlMarkupURL = ".//About_files/widget0_markup.html";//--><!]]></script>
<div id="widget0-htmlRegion" class="html_region_widget"></div>
</div>
<script type="text/javascript"><!--//--><![CDATA[//><!--new Paste('widget0', 'Scripts/Widgets/HTMLRegion', 'Scripts/Widgets/SharedResources', '.', {"emptyLook": false});//--><!]]></script>
<div id="id3" style="height: 649px; left: 63px; position: absolute; top: 195px; width: 835px; z-index: 1; " class="style_SkipStroke_3 shape-with-text">
<div class="text-content graphic_textbox_layout_style_default_External_835_649" style="padding: 0px; ">
<div class="graphic_textbox_layout_style_default">
<p style="padding-top: 0pt; " class="paragraph_style">Rhythm Shuffle 2013 is <a class="class1" title="http://SwingBuffalo.com/" href="http://SwingBuffalo.com/">Swing Buffalo’s</a> sixth annual swing dance workshop. Our goal is to spread the pure fun and enjoyment of historical forms of swing dance known as <a onclick="window.open(this.href); return false;" title="http://www.lindycircle.com/history/lindy_hop/" href="http://www.lindycircle.com/history/lindy_hop/" onkeypress="window.open(this.href); return false;">Lindy Hop</a> and <a onclick="window.open(this.href); return false;" title="http://www.lindycircle.com/history/balboa/" href="http://www.lindycircle.com/history/balboa/" onkeypress="window.open(this.href); return false;">Balboa</a>, dances straight from the swing era. Each year, we bring in some of the world’s top swing dance <a title="Instructors.html" href="Instructors.html">instructors</a> and hire some of the greatest swing bands to attract locals and out of town visitors alike to learn and dance with one another.<br /></p>
<p class="paragraph_style"><br /></p>
<p class="paragraph_style">By signing up, you will enjoy a weekend of thoughtful learning from helpful, non-threatening, and down to earth <a title="Instructors.html" href="Instructors.html">instructors</a>; dances like they had in the old days that are full of energy, improvisation, and playfulness; bands that will take you back to the 20’s, <span class="style">30</span>’s, and 40’s; blues parties; and DJ’s that’ll make you get up on your feet and onto the dance floor.<br /></p>
<p class="paragraph_style"><br /></p>
<p class="paragraph_style">We will also have a vintage vendors on hand for you to shop for the perfect swing attire so you can go to get your <a title="http://LindyFix.com/" href="http://LindyFix.com/">Lindy Fix</a> in style. Sit down to a Sunday lunch with a historical roundtable discussion on a swing-era topic. This year's topic is the Crystal Ballroom and the ships, the Americana and Canadiana (with dance floors) which brought dancers there.<br /></p>
<p class="paragraph_style"><br /></p>
<p class="paragraph_style">Each year, our workshop gets bigger and better. Swing Buffalo, as a community organization, works hard to provide the best experience possible at the cheapest price possible. As a community, we work hard all year round to make this event something we can be proud of. In doing so, we hope to inspire and excite you and show you how much better the world could be if we all just learned to swing out.<br /></p>
<p class="paragraph_style"><br /></p>
<p style="padding-bottom: 0pt; " class="paragraph_style">- The Rhythm Shuffle Team</p>
</div>
</div>
</div>
<div style="height: 65px; width: 232px; height: 65px; left: 668px; position: absolute; top: 125px; width: 232px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 232px; ">
<img src="About_files/shapeimage_5.png" alt="About" style="height: 33px; left: 0px; margin-left: 118px; margin-top: 17px; position: absolute; top: 0px; width: 109px; " />
</div>
</div>
<div class="com-apple-iweb-widget-HTMLRegion" id="widget1" style="height: 186px; left: 228px; opacity: 1.00; position: absolute; top: 1px; width: 731px; z-index: 1; ">
<blockquote><div id='cssmenu'>
<ul>
<li class='has-sub'><a href='About.html'><span style="font-family: 'Oswald'; font-size:24px;text-shadow: -2px 2px #596653">About</span></a>
<ul>
<li><a href='About.html'><span style="font-family: 'Oswald'; font-size:18px;">About Rhythm Shuffle</span></a></li>
<li><a href='Balboa.html'><span style="font-family: 'Oswald'; font-size:18px;">About Balboa</span></a></li>
<li><a href='LindyHop.html'><span style="font-family: 'Oswald'; font-size:18px;">About Lindy Hop</span></a></li>
<li><a href='Competitions.html'><span style="font-family: 'Oswald'; font-size:18px;">Competitions</span></a></li>
<li><a href='Directions.html'><span style="font-family: 'Oswald'; font-size:18px;">Directions</span></a></li>
<li><a href='Music.html'><span style="font-family: 'Oswald'; font-size:18px;">Music</span></a></li>
<li class='has-sub'><a href='#'><span style="font-family: 'Oswald'; font-size:18px;">Previous Years</span></a>
<ul>
<li><a href='/2012/'><span style="font-family: 'Oswald'; font-size:18px;">2012</span></a></li>
<li><a href='/2011/'><span style="font-family: 'Oswald'; font-size:18px;">2011</span></a></li>
<li><a href='/2010/'><span style="font-family: 'Oswald'; font-size:18px;">2010</span></a></li>
<li><a href='/2009/'><span style="font-family: 'Oswald'; font-size:18px;">2009</span></a></li>
<li class='last'><a href='/2008/'><span style="font-family: 'Oswald'; font-size:18px;">2008</span></a></li>
</ul>
</li>
<li><a href='Pricing.html'><span style="font-family: 'Oswald'; font-size:18px;">Pricing</span></a></li>
<li><a href='Schedule.html'><span style="font-family: 'Oswald'; font-size:18px;">Schedule</span></a></li>
<li><a href='Vendors.html'><span style="font-family: 'Oswald'; font-size:18px;">Vendors</span></a></li>
<li class='last'><a href='Venues.html'><span style="font-family: 'Oswald'; font-size:18px;">Venues</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='Classes.html'><span style="font-family: 'Oswald'; font-size:24px;text-shadow: -2px 2px #596653">Classes</span></a>
<ul>
<li><a href='Classes.html'><span style="font-family: 'Oswald'; font-size:18px;">Dance Classes</span></a></li>
<li><a href='Talk.html'><span style="font-family: 'Oswald'; font-size:18px;">Panel Discussion</span></a></li>
<li><a href='Instructors.html'><span style="font-family: 'Oswald'; font-size:18px;">Instructors</span></a></li>
<li><a href='Schedule.html'><span style="font-family: 'Oswald'; font-size:18px;">Schedule</span></a></li>
<li class='last'><a href='Directions.html'><span style="font-family: 'Oswald'; font-size:18px;">Directions</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='Dances.html'><span style="font-family: 'Oswald'; font-size:24px;text-shadow: -2px 2px #596653">Dances</span></a>
<ul>
<li><a href='Dances.html'><span style="font-family: 'Oswald'; font-size:18px;">Social Dances</span></a></li>
<li><a href='Competitions.html'><span style="font-family: 'Oswald'; font-size:18px";>Competitions</span></a></li>
<li><a href='Schedule.html'><span style="font-family: 'Oswald'; font-size:18px;">Schedule</span></a></li>
<li class='last'><a href='Directions.html'><span style="font-family: 'Oswald'; font-size:18px;">Directions</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='Register.html'><span style="font-family: 'Oswald'; font-size:24px;text-shadow: -2px 2px #596653">Register</span></a>
<ul>
<li><a href='Register.html'><span style="font-family: 'Oswald'; font-size:18px;">Register</span></a></li>
<li><a href='Housing.html'><span style="font-family: 'Oswald'; font-size:18px;">Housing</span></a></li>
<li><a href='Pricing.html'><span style="font-family: 'Oswald'; font-size:18px;">Pricing</span></a></li>
<li class='last'><a href='Discounts.html'><span style="font-family: 'Oswald'; font-size:18px;">Discounts</span></a></li>
</ul>
</li>
<li class='last'><a href='Contact.html'><span style="font-family: 'Oswald'; font-size:24px;text-shadow: -2px 2px #596653">Contact</span></a></li>
</ul>
</div>
</blockquote>
</div>
<div style="height: 1270px; line-height: 1270px; " class="spacer"> </div>
</div>
<div style="height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 960px; z-index: 15; " id="footer_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
</div>
</div>
</body>
</html>
and here's the CSS with my edits:
http://rhythmshuffle.com/dev/2013/robversion1/RS2013/About_files/About.css
.style_SkipStroke_2 {
background: transparent;
opacity: 1.00;
}
.paragraph_style {
color: rgb(242, 234, 196);
font-family: 'TrebuchetMS', 'Trebuchet MS', sans-serif;
font-size: 18px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
letter-spacing: 0;
line-height: 25px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 1.00;
padding-bottom: 0px;
padding-top: 0px;
text-align: justify;
text-decoration: none;
text-indent: 0px;
text-transform: none;
}
.style {
color: rgb(247, 239, 202);
line-height: 25px;
opacity: 1.00;
}
.style_SkipStroke_3 {
background: transparent;
opacity: 1.00;
}
.style_SkipStrokeSkipFillSkipOpacity {
}
.style_SkipStroke {
background: transparent;
opacity: 0.25;
}
.style_SkipStroke_1 {
background: transparent url(backgroundimage_1.jpg) no-repeat scroll center center;
opacity: 1.00;
}
.Body {
color: rgb(88, 77, 77);
font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 15px;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: 400;
letter-spacing: 0;
line-height: 20px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
opacity: 1.00;
padding-bottom: 0px;
padding-top: 0px;
text-align: left;
text-decoration: none;
text-indent: 0px;
text-transform: none;
}
.graphic_image_style_default_SkipStroke {
background: transparent;
opacity: 1.00;
}
.graphic_shape_layout_style_default_External_960_371 {
position: relative;
}
.graphic_shape_layout_style_default {
padding: 4px;
}
.graphic_shape_style_default_SkipStroke {
background: rgb(255, 255, 255);
opacity: 1.00;
}
.graphic_textbox_layout_style_default_External_835_649 {
position: relative;
}
.graphic_textbox_layout_style_default {
padding: 4px;
}
.graphic_textbox_style_default_SkipStroke {
background: transparent;
opacity: 1.00;
}
.graphic_textbox_style_default_SkipStrokeSkipFillSkipOpacity {
}
a {
color: rgb(255, 234, 173);
text-decoration: underline;
}
a:visited {
color: rgb(241, 231, 191);
text-decoration: underline;
}
a.class1 {
color: rgb(255, 234, 173);
}
a.class1:visited {
color: rgb(241, 231, 191);
text-decoration: underline;
}
a.class1:hover {
color: rgb(255, 255, 218);
text-decoration: underline;
}
a:hover {
color: rgb(255, 255, 218);
text-decoration: underline;
}
#widget1 a {
color: rgb(255, 234, 173);
text-decoration: underline;
}
#widget0 a:hover {
color: rgb(255, 255, 218);
text-decoration: underline;
}
#widget1 a:hover {
color: rgb(255, 255, 218);
text-decoration: underline;
z-index: 1;
}
#widget0 a:visited {
color: rgb(241, 231, 191);
text-decoration: underline;
}
#widget0 a {
color: rgb(255, 234, 173);
text-decoration: underline;
}
#widget1 a:visited {
color: rgb(241, 231, 191);
text-decoration: underline;
}
.spacer {
font-size: 1px;
line-height: 1px;
}
.bumper {
font-size: 1px;
line-height: 1px;
}
body {
-webkit-text-size-adjust: none;
}
div {
overflow: visible;
}
img {
border: none;
}
.InlineBlock {
display: inline;
}
.InlineBlock {
display: inline-block;
}
.inline-block {
display: inline-block;
vertical-align: baseline;
margin-bottom:0.3em;
}
.inline-block.shape-with-text {
vertical-align: bottom;
}
.vertical-align-middle-middlebox {
display: table;
}
.vertical-align-middle-innerbox {
display: table-cell;
vertical-align: middle;
}
div.paragraph {
position: relative;
}
li.full-width {
width: 100;
}
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
}
#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu a:visited { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu a:visited {text-decoration: none;}
#cssmenu {height: 70px; background-color: transparent; /*box-shadow: 0px 2px 3px rgba(0,0,0,.4);*/}
#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: rgb(242,234,200);
font-family: 'Oswald';
font-size: 24px;
text-decoration: none;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:visited {
color: rgb(242,234,200);
font-family: 'Oswald';
font-size: 24px;
text-decoration: none;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: rgb(255,255,221); text-decoration: none;}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: rgb(242,234,200);
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before{
content: '';
display: block;
border-color: transparent transparent rgb(242,234,200) transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a {
color: rgb(50,50,50);
text-decoration: none;
font-family: 'Oswald';
font-size: 24px;
background-color: rgb(242,234,200);
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:visited {
color: rgb(50,50,50);
text-decoration: none;
font-family: 'Oswald';
font-size: 24px;
background-color: rgb(242,234,200);
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {background-color: rgb(255,255,221);}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: rgb(242,234,200);
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}
#cssmenu ul ul a:hover{
text-decoration: none;
background-color: rgb(0,34,60);
color: rgb(242,234,200);
}
If anyone is using Safari 6 on Lion, let me know if you're having the behavior I describe. Even though I'm emptying my caches, I have a hard time believing what I'm seeing…
Thanks, Rob
UPDATE: Vish thought it might be one of the javascripts, so I tried commenting out the link in the header which linked to it and the menus started working in the newest version of Safari! The questions are: Why? (and) What else might I be breaking by just permanently removing the link to the script? Here's the script which appears to be the culprit:
// Created by iWeb 3.0.4 local-build-20130210
setTransparentGifURL('Media/transparent.gif');function applyEffects()
{var registry=IWCreateEffectRegistry();registry.registerEffects({stroke_0:new IWEmptyStroke(),shadow_0:new IWShadow({blurRadius:0,offset:new IWPoint(-2.1213,2.1213),color:'#000000',opacity:0.350000}),shadow_1:new IWShadow({blurRadius:0,offset:new IWPoint(-2.1213,2.1213),color:'#000000',opacity:0.350000})});registry.applyEffects();}
function hostedOnDM()
{return false;}
function onPageLoad()
{loadMozillaCSS('About_files/AboutMoz.css')
adjustLineHeightIfTooBig('id2');adjustFontSizeIfTooBig('id2');detectBrowser();adjustLineHeightIfTooBig('id3');adjustFontSizeIfTooBig('id3');fixAllIEPNGs('Media/transparent.gif');fixupIECSS3Opacity('id1');fixupAllIEPNGBGs();IMpreload('About_files','shapeimage_3','0');Widget.onload();applyEffects()}
function onPageUnload()
{Widget.onunload();}
Alright, I figured out that it's specifically the "applyEffects()" function call. Does anyone know what this is supposed to govern so I know what I'm doing when I take it out?
I am not sure what behavior you are exactly referring too in Safari 6. I opened the above html file in Safari and after the page loaded, I saw a delay on mouse hover. I only see this delay in Safari. After closely examining your html and your css, I found the issue had to do with the following lines of code.
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
When using opacity and visibility both you have to be careful as opacity renders the element with a lag, for the opacity to reach from 0 to 100% it may take a few ms delay. And on the other hand visibility of the drop-down menu changes instantly, its like show On/OFF switch. I would recommend that you disable one or look at the script file to add a timeout to offset the visibility delay.