Question

这是我制作的下拉菜单，但它不起作用......目标元素必须不正确但我无法弄清楚..请帮助

Answer 1

点击此处 jsfiddle

您需要在下拉列表ul（第二个ul）上应用更改，而不是li或其中的a。

而不是ul li li a使用此CSS代码：

 ul  ul{
        display: none;
    }

和JQ：

jQuery(function($) {

    $('.myli').hover(function() {
    $(this).find('ul').slideToggle();

    });


});

ALSO 您只能使用CSS来执行此操作。但是如果你想要复制slideToggle转换，你应该知道css中的transition只适用于'可计算'值（0,1,100％）等，因此它不适用于{{1} }或display所以为了做到这一点你需要知道下拉列表的固定高度并按照这样做

<强> jsfiddle

visibility

Answer 2

这里的解决方案......

你只能用css做...

.myli {
    position: relative;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    max-width: 180px;
    z-index: 2;
    display: none;
}
.myli:hover .dropdown-menu {
    display: block;
}

<li class="myli"><a href="#">Home</a>
    <ul class="dropdown-menu">
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
    </ul>
</li>

Answer 3

第45行删除此部分： ul li li a { display：none; }

并添加：

    ul li ul {
        display: none;
    }

    ul li:hover ul {
        display: block;
    }

悬停下拉菜单无法使用jquery工作

3 个答案: