CSS 仅在我快速使用鼠标时才在当前版本的 Safari 中工作



我有一个我正在开发的网站的CSS菜单。我已经对它进行了调整,使它在Firefox、Chrome和旧版本的Safari上完全符合我的要求。然而,在最新版本的Safari(Lion上的6.0.2)中,发生了一些奇怪的事情。如果我让页面完全加载,然后将鼠标悬停在菜单上,则菜单功能不起作用。然而,如果我在加载页面时将鼠标悬停在菜单上,它会很好地工作!这让我抓狂,直到我找到了模式。嗯,我想它仍然让我发疯。这种错误的行为似乎只影响最新的Safari,我不知道如何修复它。我已经尝试过注释掉我认为可能与之冲突的其他CSS文件。问题可能与我使用iWeb生成初始HTML,然后编辑HTML以添加菜单,编辑CSS以添加菜单功能有关;造型。

我正在积极编写代码,所以这个页面可能会更改,但这是我(编辑)遇到问题的页面。注意,许多菜单项还没有为它们制作页面:

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&#10;winner of Buffalo Spree’s 2011&#10;“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>

这是我编辑的CSS:

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);
}

如果有人在Lion上使用Safari 6,请告诉我你是否有我描述的行为。尽管我正在清空我的缓存,但我很难相信我看到的…

谢谢,Rob

更新:Vish认为它可能是java脚本之一,所以我尝试注释掉链接到它的标题中的链接,菜单开始在最新版本的Safari中工作!问题是:为什么?(以及)如果我只是永久删除脚本链接,还会破坏什么?以下是似乎是罪魁祸首的脚本:

// 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();}

好吧,我发现它是专门的"applyEffects()"函数调用。有人知道这应该管理什么吗?这样我就知道当我把它拿出来的时候我在做什么?

我不确定你在Safari 6中到底指的是什么行为。我在Safari中打开了上面的html文件,加载页面后,我看到鼠标悬停出现延迟。我只在Safari中看到这种延迟。在仔细检查了html和css之后,我发现问题与以下代码行有关。

#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;

当使用不透明度和可见性时,您必须小心,因为不透明度会延迟渲染元素,不透明度要达到0到100%,可能需要几毫秒的延迟。另一方面,下拉菜单的可见性会立即改变,就像显示开/关开关一样。我建议您禁用一个或查看脚本文件以添加超时来抵消可见性延迟。

相关内容

  • 没有找到相关文章