0

我有一个我正在开发的网站的 CSS 菜单。我已经对其进行了调整,使其在 Firefox、Chrome 和旧版本的 Safari 上完全符合我的要求。然而,在最新版本的 Safari(Lion 上的 6.0.2)中,发生了一些奇怪的事情。如果我让页面完全加载然后将鼠标悬停在菜单上,则菜单功能不起作用。但是,如果我在页面加载时将鼠标悬停在菜单上,它就可以正常工作!这让我发疯,直到我弄清楚了模式。好吧,我想它仍然让我发疯。这种错误行为似乎只影响最新的 Safari,我不知道如何修复它。我尝试注释掉我认为可能与之冲突的其他 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,请告诉我您是否遇到了我所描述的行为。即使我正在清空我的缓存,我也很难相信我所看到的......</p>

谢谢,罗伯

更新:Vish 认为它可能是其中一种 javascript,所以我尝试注释掉链接到它的标题中的链接,并且菜单开始在最新版本的 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()”函数调用。有谁知道这应该管理什么,所以当我把它拿出来时我知道我在做什么?

4

1 回答 1

0

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

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

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

于 2013-02-09T21:09:40.963 回答