【发布时间】：2015-12-04 02:34:15
【问题描述】：
好的，所以我之前问过类似的问题，但我得到的答案非常复杂，即使在尝试将其集成到 laravel 网站 2 小时后它也不起作用。现在我知道这看起来很冗长，但实际上并非如此。我只是难以用几句话表达自己。
如果有人能帮我解决这个问题，我将不胜感激（请参阅小提琴）：http://jsfiddle.net/pyrot/NaE43/ 以便它正常工作（我在下面提到了问题）。
目前我使用了 jquery 的可怜知识，如果有人可以帮助我使其正常运行，我现在必须一起破解它，同时仍然很简单，非常感谢。
当有人将鼠标悬停在带有以下链接的“查看更多”链接上时，我试图给它一个很酷的向下滑动过渡：“广告、销售、加入”以及每当有人悬停在这三个链接中的任何一个上时（请将鼠标悬停在小提琴中的“广告”链接上）应该会出现另一个下拉框，但这次在右侧带有幻灯片打开过渡。当我从“查看更多”链接移动鼠标时，我也在努力如何使下拉菜单不消失。我为第一个下拉框做了这件事，不专业地将其边距靠近“查看更多”链接，而对于第二个下拉框（右侧），当我尝试访问它时，它像魔术一样消失了.老实说，我在这方面花了很多时间，但我就是无法让它发挥作用。请帮帮我！
这是我的导航：
<ul id="parent-ul">
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">brands</a></li>
<li><a href="#" class="view-drop">view more</a>
<span class="view-drop-content">
<ul>
<li><a href="#" class="v-d-link-one">Ads</a></li>
<li><a href="#" class="v-d-link-two">sell</a></li>
<li><a href="#" class="v-d-link-three">Join</a></li>
</ul>
</span>
<span class="view-drop-content-two">
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
</span>
</li>
<li><a href="#">LINK 4</a></li>
<li><a href="#">LINK 5</a></li>
</ul>
这是我的代码：
$(document).ready(function() {
$(".view-drop, .view-drop-content").hover(function(){
$('.view-drop-content').show();
}, function(){
$('.view-drop-content').hide();
}) ;
});
$(document).ready(function() {
$(".v-d-link-one, .view-drop-content-two").hover(function(){
$('.view-drop-content-two').show();
}, function(){
$('.view-drop-content-two').hide();
}) ;
});
这是我的 CSS：
#parent-ul li {
display: inline !important;
list-style-type:none !important;
padding-right: 5px
}
.view-drop-content {
display: none;
background-color: #000000;
width: auto;
height: auto;
position: absolute;
margin: 15px auto 0px -65px;
z-index: 10;
float: left;
border: 4px #84ca40 solid;
border: 2px #84ca40 solid !important;
border-radius: 5px;
overflow: hidden;
padding: 0px !important;
text-indent: -30px;
}
.view-drop-content-two {
display: none;
background-color: #000000;
width: auto;
height: auto;
position: absolute;
margin: 15px auto 0px 0px;
z-index: 10;
float: right;
border: 4px #84ca40 solid;
border: 2px #84ca40 solid !important;
border-radius: 5px;
overflow: hidden;
padding: 0px !important;
text-indent: -30px;
}
.view-drop-content > ul li a,
.view-drop-content-two > ul li a {
color: #ffffff;
display: block;
text-align: left;
width: 100%;
height: auto;
}
【问题讨论】：
-
Instaed 尝试
MouseEnter/MouseLeave/MouseOver事件。 -
我在大约四 (4) 小时前尝试使用它，但我家门口出现了更多问题。顺便感谢您的回复 Ankur140290。
-
您应该指定“类似问题”，以便我们可以检查其答案，看看这是否真的是重复的。并且反复喊“请”并没有真正的帮助。
标签： javascript jquery html css drop-down-menu