好的，所以我之前问过类似的问题，但我得到的答案非常复杂，即使在尝试将其集成到 Laravel 网站 2 小时后，它也没有用。现在我知道这看起来很冗长，但事实并非如此。我只是无法用几句话来表达自己。
如果有人能帮我解决这个问题，我将不胜感激(请参阅 fiddle ):http://jsfiddle.net/pyrot/NaE43/以便它正常工作(我已经在下面提到了问题)。
目前，我使用了 jquery 的可怜知识，如果有人可以帮助我让它正常运行，同时仍然很简单，那么我现在必须将其组合在一起，将不胜感激。
当有人将鼠标悬停在“查看更多”链接上时，我试图给它一个很酷的向下滑动过渡，该链接与这些链接一起向下滑动:“广告、销售、加入”，并且每当有人将鼠标悬停在这三个链接中的任何一个上时(请将鼠标悬停在 fiddle 中的“广告”链接上)应该会出现另一个下拉框，但这次是向右滑动打开过渡。当我将鼠标从“查看更多”链接移开时，我也在努力解决如何使下拉菜单不消失的问题。我对第一个下拉框做了这个，不专业地把它的边距放在“查看更多”链接附近，至于第二个下拉框(右边)，当我试图去它的时候，它像魔术一样消失了.老实说，我已经在这上面花了很多时间，但我就是无法让它发挥作用。请有人帮助我!
这是我的导航:
<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;
}
最佳答案
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
$(".view-drop").hover(function(){
$('.view-drop-content').slideDown().delay( 800 );
}, function(){
$('.view-drop-content').slideUp().delay( 800 );
}) ;
$(".view-drop-content ul li").hover(function(){
$('.view-drop-content').css("display","inline");
$('.view-drop-content-two').slideDown().delay( 400 );
}, function(){
$('.view-drop-content-two').slideUp().delay( 400 );
}) ;
})
</script>
<style type="text/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: 20px 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;
}
</style>
</head>
<body>
<ul id="parent-ul">
<li><a href="#">home<a></li>
<li><a href="#">about<a></li>
<li><a href="#">brands<a></li>
<li class="view-drop"><a href="#" >view more</a>
<span class="view-drop-content">
<ul>
<li><a href="#" class="v-d-link">Ads</a></li>
<li><a href="#" class="v-d-link">sell</a></li>
<li><a href="#" class="v-d-link">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>
</body>
关于javascript - 请帮助我使这个下拉菜单正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21036487/