Question

我有一个带子菜单的菜单（垂直）。我的第一个li在子菜单中处于活动状态。我的问题是，当我将鼠标悬停在另一个li时，我在上一个中添加了子菜单。

我需要的是：

当我将鼠标悬停在菜单中时，只获取当前li的子菜单
当我的光标没有悬停在我的菜单中时，获取具有on class

这是jsFiddle的链接

这是我的代码：

<nav>
                <div id="menuu">
                    <ul class="niveau1">
                        <li><a id="lrf"  class="sousmenu" href="#">Test 1</a>
                            <ul id="lrfH" class="niveau2 on">
                                <li><a href="#">ss test 1</a></li>
                                <li><a href="#">ss test 2</a></li>

                            </ul>
                        </li>
                       <li><a id="cm" class="sousmenu" href="#">Test 2</a>
                            <ul id="cmH" class="niveau2">
                                <li><a href="#">ss test 1</a></li>
                                <li><a href="#">ss test 2</a></li>
                            </ul>
                        </li>
                        <li><a id="dj" class="sousmenu" href="#">Test 3</a>
                            <ul id="djH" class="niveau2">
                                <li><a href="#">ss test 1</a></li>
                                <li><a href="#">ss test 2</a></li>
                            </ul>
                        </li>

                    </ul>
                </div>
            </nav>

CSS代码

#menuu ul{

 margin:0;
 padding:0;
 padding-left:97px;
 line-height:30px;
    }
#menuu li{
    float: left;
    list-style: outside none none;

        }
.sousmenu{

 color: #000 !important;
 text-decoration:none;
 width:150px;
 height:30px;
 display:block;
 text-align:center;
  border:1px solid #000;
}
.niveau2{
    margin-left: -50px !important;
}
.niveau2 a{
    padding-left:20px !important;
    text-decoration:none;
    color:red ;
}
.sousmenu:hover{
    color: #fff !important;
    background-color: #ddd;
    border-bottom-color: #000 !important;
}
#menuu ul ul{
     position:absolute;
     visibility:hidden;
     padding-left:0px;
          }

#menuu ul ul li:hover a{
  color:#000;
}
#menuu ul ul ul{
 left:152px;
 top:-0.5px;
 display:none;
         }

 #menuu ul li:hover ul{
  visibility:visible;   
        }
.niveau2.on{
    visibility:visible !important;
}

JS代码

$(document).ready(function(e){
                    $('.sousmenu').hover(function(e){
                        e.preventDefault();
                        var getID=$(this).attr('id');
                        $("#"+getID+"H").css("visibility","visible");
                        $(".on").css("visibility","hidden");
                    });

                });

Answer 1

 $(document).ready(function(e){
   $('.sousmenu').hover(function(e){
     e.preventDefault();
     var getID=$(this).attr('id');
     $(".niveau2").hide();
     $("#"+getID+"H").show();
   });
});

试试这个。以下是演示：http://jsfiddle.net/hemnathmouli/nkzq6oyr/2/

如何在悬停中显示子菜单

1 个答案: