我有一个子菜单,显示用户将鼠标悬停在主菜单项上的时间。它在Safari(我的版本为10.0.1)以外的所有浏览器中都可以正常工作。
我已经深入研究了代码,但没有找到任何解决方案。似乎某处存在某种溢出问题,但我无法找到位置。
这是Chrome上的预期行为:
Working menu on Chrome
这是Safari上的结果:
Issue on Safari
我在这里做了一些关于Stackoverflow的研究,但是没有发现任何有用的东西,主要是因为我什至不知道要使用什么关键字。
这是网站:http://stage.federicalotti.com/
HTML代码:
<div class="nav-wrap">
<nav id="nav">
<div class="container">
<div class="main-menu">
<ul id="menu-menu-principale" class="menu">
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-6 current_page_item menu-item-16">
<a href="http://stage.federicalotti.com/">
<span class="menu-text">Homepage</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19">
<a href="http://stage.federicalotti.com/biografia/">
<span class="menu-text">Biografia</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-24" class="no-link menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-24">
<a href="#">
<span class="menu-text">Repertorio</span>
<span class="menu-arrow"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
<a href="http://stage.federicalotti.com/lista-brani/">
<span class="menu-text">Lista brani</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25">
<a href="http://stage.federicalotti.com/proposte-concertistiche/">
<span class="menu-text">Proposte concertistiche</span>
<span class="menu-arrow"></span>
</a>
</li>
</ul>
</li>
<li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47">
<a href="http://stage.federicalotti.com/concerti/">
<span class="menu-text">Concerti</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-48" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-48">
<a href="#">
<span class="menu-text">Media</span>
<span class="menu-arrow"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46">
<a href="http://stage.federicalotti.com/fotografie/">
<span class="menu-text">Fotografie</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45">
<a href="http://stage.federicalotti.com/audio-files/">
<span class="menu-text">Audio files</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44">
<a href="http://stage.federicalotti.com/riprese-video/">
<span class="menu-text">Riprese video</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">
<a href="http://stage.federicalotti.com/rassegna-stampa/">
<span class="menu-text">Rassegna stampa</span>
<span class="menu-arrow"></span>
</a>
</li>
</ul>
</li>
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
<a href="http://stage.federicalotti.com/news/">
<span class="menu-text">News</span>
<span class="menu-arrow"></span>
</a>
</li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">
<a href="http://stage.federicalotti.com/contatti/">
<span class="menu-text">Contatti</span>
<span class="menu-arrow"></span>
</a>
</li>
</ul>
</div><!-- .main-menu -->
<div class="search-bar-mobile">
<div class="container">
<form role="search" method="get" class="search-form" action="http://stage.federicalotti.com/">
<label>
<span class="screen-reader-text">Cerca:</span>
<input type="text" class="search-field" autocomplete="off" placeholder="Cerca..." name="s" title="Cerca:">
</label>
<input type="submit" class="search-submit" value="Cerca">
</form>
</div><!-- .container -->
</div><!-- .search-bar-mobile -->
</div><!-- .container -->
</nav>
<div class="search-bar">
<div class="container">
<form role="search" method="get" class="search-form" action="http://stage.federicalotti.com/">
<label>
<span class="screen-reader-text">Cerca:</span>
<input type="text" class="search-field" autocomplete="off" placeholder="Cerca..." name="s" title="Cerca:">
</label>
<input type="submit" class="search-submit" value="Cerca">
</form>
</div><!-- .container -->
</div><!-- .search-bar -->
</div><!-- .nav-wrap -->
Sass代码:
/*
* nav
*/
.nav-wrap {
perspective: 1000px;
}
#nav {
position: absolute;
background: #FFF;
left: 0;
top: 0;
height: 80px;
width: 100%;
border-top: 1px solid #f1f1f1;
z-index: 5;
box-shadow: 0 0 145px 0 rgba(0,0,0,0.17);
visibility: hidden;
opacity: 0;
transform: rotateX(-30deg);
transform-origin: top;
transition: 0.2s;
&.open {
visibility: visible;
opacity: 1;
transform: rotate(0);
}
}
.main-menu {
text-align: center;
> ul > li {
list-style: none;
display: inline-block;
line-height: 80px;
padding: 0 20px;
position: relative;
> a:link,
> a:visited {
display: block;
text-decoration: none;
font-size: 13px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: #000;
transition: 0.1s;
}
> a:hover {
color: $verde;
}
&.no-link {
> a:hover {
cursor: default;
}
}
> .sub-menu {
position: absolute;
background: transparent;
width: 320px;
padding: 2px 0;
top: 80px;
left: -10px;
display: none;
> li {
list-style: none;
display: block;
padding: 2px 0;
line-height: normal;
> a:link,
> a:visited {
display: block;
position: relative;
width: 100%;
background: #FFF;
color: #000;
letter-spacing: 1.2px;
font-size: 13px;
padding: 22px 30px;
box-sizing: border-box;
text-align: left;
text-transform: uppercase;
text-decoration: none;
box-shadow: 0 5px 50px rgba(0, 0, 0, 0.11);
opacity: 0;
transform: translateY(30px);
}
> a:hover {
color: $verde;
}
}
}
}
}
jQuery代码(我正在使用velocity.js):
qode = {
window: $(window),
html: $('html'),
body: $('body'),
nav: $('#nav'),
burgerWrap: $('.burger-wrap'),
searchBar: $('.search-bar'),
header: $('#header'),
wrapper: $('#wrapper')
};
/*
* Mouse enter animation
*/
qode.body.on('mouseenter', '.main-menu > ul > li', function(){
if ( qode.wrapper.width() > 1024 ) {
var self = $(this),
subMenu = self.find('> .sub-menu'),
elements = self.find('> .sub-menu > li a');
subMenu.stop().fadeToggle(0);
elements.stop().each(function(index){
$(this).stop();
$(this).velocity({
opacity: [ 1, 0 ],
translateY: [ 0, '30px' ]
}, {
delay: 75 * index,
duration: 200
});
});
} // if wrapper width
});
/*
* Mouse leave animation
*/
qode.body.on('mouseleave', '.main-menu > ul > li', function(){
if ( qode.wrapper.width() > 1024 ) {
var self = $(this),
subMenu = self.find('> .sub-menu'),
elements = self.find('> .sub-menu > li a');
$( elements.get().reverse() ).stop().each(function(index){
$(this).velocity({
opacity: [ 0, 1 ],
translateY: [ '30px', 0 ]
}, {
delay: 75 * index,
duration: 200,
complete: function(elems){
if ( elements.length === ( index + 1 ) ) {
subMenu.stop().fadeToggle(0);
}
}
});
});
} // if wrapper width
});
最佳答案
您没有在z-index
上设置.open
。我在Safari中猜测它以不同的方式继承吗?
&.open {
visibility: visible;
opacity: 1;
transform: rotate(0);
z-index:6; // Make sure the z-index is higher as the one of the page content.
}