Javascript jQuery菜单在Safari中未折叠
我需要一些帮助。基本上，我已经使用JQuery和css的组合创建了一个菜单栏，它没有像我在Safari中使用的6.1.6那样折叠或隐藏 我先从代码开始 CSS代码 HTML 问题 从代码中可以看到，当鼠标指针指向menuItem1 div时，它将高亮显示该div并取消隐藏包含jQuery menuContents的menuDiv。这一切都很好，直到你点击任何子菜单项 在其他浏览器Opera、Mozilla、Chrome中，单击子菜单时，菜单会正常折叠，menuDiv会淡出，menuItem1会取消高亮显示。在Safari中，mid和子菜单逐渐消失，但menuDiv从不消失，menuItem1保持高亮显示，就好像仍然有鼠标指针触发css一样Javascript jQuery菜单在Safari中未折叠,javascript,jquery,html,css,safari,Javascript,Jquery,Html,Css,Safari,我需要一些帮助。基本上，我已经使用JQuery和css的组合创建了一个菜单栏，它没有像我在Safari中使用的6.1.6那样折叠或隐藏 我先从代码开始 CSS代码 HTML 问题 从代码中可以看到，当鼠标指针指向menuItem1 div时，它将高亮显示该div并取消隐藏包含jQuery menuContents的menuDiv。这一切都很好，直到你点击任何子菜单项 在其他浏览器Opera、Mozilla、Chrome中，单击子菜单时，菜单会正常折叠，menuDiv会淡出，menuItem1会取
我不确定这是CSS问题、jQuery问题还是浏览器版本问题。任何帮助或指导都将不胜感激。看起来这个问题在我升级到约塞米蒂时已经解决了，这意味着这毕竟是一个狩猎问题。所有菜单正常折叠，没有问题
#menuHolder
{
width:200px;
height:30px;
background:#CCC;
position:fixed;
top:10px;
border: thin ridge #333;
}
#menuItem1
{
margin:0.15em;
display:table;
float:left;
width:150px;
height:25px;
background:#666;
}
#menuDiv
{
background-color:#FFF;
height:100px;
width:150px;
opacity:1;
visibility:hidden;
-webkit-transition: all 0.5s ease-out-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position:absolute;
top:34px;
margin-left:.1em;
}
#menuItem1:hover
{
background:#06F;
}
#menuItem1:hover #menuDiv
{
opacity:1;
visibility:visible;
background-color:#F00;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#menuContents
{
font-size:10px;
}
.ui-menu
{
width: 150px;
}
<body>
<div id="menuHolder">
<div id="menuItem1">
Menu 1
<div id="menuDiv">
<ul id="menuContents">
<li>Main Menu 1
<ul>
<li>Mid Menu 1
<ul>
<li>Sub Menu 1.1</li>
<li>Sub Menu 1.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
$(function() {
$( "#menuContents" ).menu();
});