Question

好吧所以我之前问了类似这样的问题，但我得到的答案是如此复杂，以至于即使经过2个小时试图将其整合到laravel网站中它也无效。现在我知道这看起来很漫长，但事实并非如此。我只是用一句话来表达自己的问题。

我真的很感激，如果有人可以帮我解决这个问题（请参阅小提琴）：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;

}

Answer 1

<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>

Answer 2

试试 FIDDLE

$(document).ready(function () {
    $(".view-drop, .view-drop-content").mouseover(function () {
        $('.view-drop-content').show();
    });
    $(".view-drop-content-two, .v-d-link-one").mouseover(function () {
        $('.view-drop-content').show();
        $('.view-drop-content-two').show();
    });
    $(".view-drop-content-two").mouseleave(function () {
        $('.view-drop-content').hide();
        $('.view-drop-content-two').hide();
    });
    $(".view-drop, .view-drop-content").mouseleave(function () {
        $('.view-drop-content').hide();
        $('.view-drop-content-two').hide();
    });
});

您的HTML <span>标记稍有变化：
我为课程style="margin-left:-2%;"

添加了view-drop-content-two

Answer 3

以下是创建CSS下拉菜单的简单教程

TUTORIAL

Answer 4

我认为，你只能在CSS中实现它，你需要改变你的标记和css of course。这是演示：

<强> HTML：

<ul id="menu">
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">brands</a></li>        
    <li>
        <a href="#">VIEW MORE</a>        
        <ul>
            <li>
                <a href="#">Ads</a>
                <ul>
                    <li><a href="#">link 1</a></li>
                    <li><a href="#">link 2</a></li>
                    <li><a href="#">link 3</a></li>
                </ul>
            </li>
            <li><a href="#">sell</a></li>
            <li><a href="#">Join</a></li>
        </ul>
    </li>
    <li><a href="#">link 4</a></li>
    <li><a href="#">link 5</a></li>
</ul>

<强> CSS：

*{margin:0; padding:0}
#menu > li {
    float:left;
    list-style-type:none;
    padding-right: 5px;
    position:relative;
    z-index:10;
}

#menu li ul{
    display:none;
    background:#000;
    border: 1px #84ca40 solid;
    position:absolute;
    top:20px;
    left:0;
    width:80px;
}
#menu li:hover > ul{
    display:block;
}
#menu li li ul{
    padding:0;
    top:0;
    left:80px;
}
#menu li li{
    display:block;
    padding:10px;
}
#menu li li:hover{
    background:#333;
}

<强>的jsfiddle： http://jsfiddle.net/ashishanexpert/NaE43/24/

请参阅，不需要javascript或jQuery。如果你想要一些动画，那么你应该使用jQuery。祝你好运！

请帮助我使这个下拉菜单正常工作

4 个答案: