Javascript 当列表项是锚点时，使用li:hover不会显示div

我的下拉菜单有问题。我试图让最终结果看起来像百思买的导航。下面是代码，最后还有更多解释

<div class="navbar">
<ul>
    <li>Products
        <div class="secondlevel">
            <ul>
                <li>Testing 1
                    <div class="thirdlevel two-columns">
                        <div class="column">
                            <ul>
                                <li>Testing 1</li>
                                <li>Testing 2</li>
                                <li>Testing 3</li>
                                <li>Testing 4</li>
                            </ul>
                        </div>
                        <div class="column">
                            <ul>
                                <li>Testing 1</li>
                                <li>Testing 2</li>
                                <li>Testing 3</li>
                                <li>Testing 4</li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>Testing 2
                    <div class="thirdlevel">
                        <ul>
                            <li>Testing 1</li>
                            <li>Testing 2</li>
                            <li>Testing 3</li>
                            <li>Testing 4</li>
                        </ul>
                    </div>
                </li>
                <li>Testing 3</li>
                <li>Testing 4</li>
            </ul>
        </div>
    </li>
    <li>Test Link</li>
</div>

我遇到的问题是，当我尝试将列表项转换为与以下内容的链接时：

产品

当我这样做时，将鼠标悬停在元素上不再有效

此外，悬停效果在IE中也不起作用。我猜这是因为我使用了

li:hover

我曾试图使用jQuery实现悬停效果，我真的很想这样做，因为我已经读到它更适合我需要做的事情，但我在这方面的知识有限

根据我的研究，我可以使用这样的东西：

$(document).ready(function () {
    $(".main-nav-item").hover(function () {
        $(".secondary-menu").toggleClass("active");
        $(".tertiary-menu").toggleClass("hide");
    });
});

当然，这些课程与我所学的不一致，但这就是它的要点。我的问题是我不能让它只对一个孩子起作用。希望这是个正确的词。例如：当我将鼠标悬停在第一个

上时，它将打开所有子菜单。现在的方式是完美的，除了一个事实，没有什么可以成为一个链接，这是一种重要的

---

如果您需要更多信息，请告诉我。

您是否尝试过

？至于IE方面的东西，我会建议使用IE特定的样式，或者如果你还没有，使用CSS重置，作为一个开始。你有工作示例吗？

尝试在

中创建链接



测试1

测试2

测试3

测试4



测试1

测试2

测试3

测试4



测试2

测试1

测试2

测试3

测试4



测试3

测试4



测试链路

我试过了，但效果不太好，因为

包含了整个导航菜单。啊，我明白了。没有想到这一点，但我同意@fuzail lcorder将超链接设置为display:block。试试看！不幸的是，这不起作用。这里有一个指向JSFIDLE的链接：查看编辑。。这是块元素。。。不过，锚定不会自然继承属性

$(document).ready(function () {
    $(".main-nav-item").hover(function () {
        $(".secondary-menu").toggleClass("active");
        $(".tertiary-menu").toggleClass("hide");
    });
});

a { display:block; }