Javascript 下拉菜单在菜单按钮边缘出现故障
我有个奇怪的问题。我创建了一个标准的下拉菜单,但是当我在菜单和下拉菜单之间时,我遇到了一个菜单不相似的问题。我找不到任何css可以阻止悬停状态,但也许你的眼睛比我的好 下面是正在发生的事情的gif: 我的js代码:Javascript 下拉菜单在菜单按钮边缘出现故障,javascript,jquery,html,css,web,Javascript,Jquery,Html,Css,Web,我有个奇怪的问题。我创建了一个标准的下拉菜单,但是当我在菜单和下拉菜单之间时,我遇到了一个菜单不相似的问题。我找不到任何css可以阻止悬停状态,但也许你的眼睛比我的好 下面是正在发生的事情的gif: 我的js代码: //------- NAV MENU --------// $('nav li').hover( function () { $('ul', this).stop(true,true).fadeIn({ duration: 300, queue: false }).sli
//------- NAV MENU --------//
$('nav li').hover(
function () {
$('ul', this).stop(true,true).fadeIn({ duration: 300, queue: false }).slideDown(300);
},
function () {
$('ul', this).stop(true,true).fadeOut({ duration: 300, queue: false }).slideUp(300);
});
相关HTML:
<nav>
<ul class="center">
<li class="menu">
<a href="#Home">Home</a>
</li>
<li class="menu">
<a class="inactive">Get Started</a>
<ul class="dropdown hidden" id="drop1">
<li class="dropitem"><a href="#Start">Start Making Your CCR</a></li>
<li class="dropitem"><a href="#HowItWorks">How CCR Writer Works</a></li>
<li class="dropitem"><a href="#Why">Why Choose CCR Writer</a></li>
<li class="dropitem"><a href="#MyPrevious">Access My Previous CCRs</a></li>
</ul>
</li>
</ul>
</nav>
尝试删除ul下拉列表上的z索引。尝试删除ul下拉列表上的z索引。从此CSS中删除z索引:-1:
ul.dropdown {
position: absolute;
white-space: nowrap;
width: auto;
min-width: 100%;
top: 100px;
left: 0;
padding-top: 0;
margin: 0;
padding-bottom: 10px;
/* z-index: -1; */ /* <-- Remove this line */
border: none;
border-radius: 0px 0px 2px 2px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
background-color: #FFF;
height: auto;
}
从此CSS中删除z索引:-1:
ul.dropdown {
position: absolute;
white-space: nowrap;
width: auto;
min-width: 100%;
top: 100px;
left: 0;
padding-top: 0;
margin: 0;
padding-bottom: 10px;
/* z-index: -1; */ /* <-- Remove this line */
border: none;
border-radius: 0px 0px 2px 2px;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.176);
background-color: #FFF;
height: auto;
}
尝试使用display:inline flex而不是display:inline块
尝试使用display:inline flex而不是display:inline块
您只需将stop中的参数从true更改为false即可解决此问题:
正如您在这个JSFIDLE上看到的:您只需将stop中的参数从true更改为false即可解决此问题:
正如您在这个JSFiddle上看到的:您能够从ul.dropdown中删除z-index:-1吗我想这会解决问题的。你也可以更改li.menu{display:table cell;}或li.menu{z-index:1;}你能从ul.dropdown中删除z-index:-1吗我想这会解决问题的。你也可以更改li.menu{display:table cell;}或li.menu{z-index:1;}就是这样。非常感谢。就是这样。非常感谢。这是常规类型的东西还是使用内联flex而不是内联块的其他原因?我不知道这是常规,但大多数开发人员使用下拉菜单上的display:list项。这是常规类型的东西还是使用内联flex的其他原因内联块的定义?我不能说这是一个普遍的做法,但大多数开发人员使用下拉菜单上的display:list项。
li.menu {
display: display: inline-flex;
padding:0;
margin: 0;
padding-left: 15px;
padding-right: 15px;
height: 100px;
position: relative;
}
$('nav li').hover(
function () {
$("ul",this).stop(false,false).fadeIn({ duration: 300, queue: false }).slideDown(300);
},
function () {
$("ul",this).stop(false,false).fadeOut({ duration: 300, queue: false }).slideUp(300);
});