html - 为什么下拉菜单不起作用？

Question

我在这家公司工作，该公司希望将帖子类别显示为下拉菜单。从我的 Angular 来看，这一切都适用于 chrome，但我的一位同事说它在她的计算机上不起作用，她也使用 Chrome，但不是在 Pc 上，而是在 Mac 上。

然后我检查了 IE 和 Firefox 上的页面，但它对我来说不起作用。它只显示元素的元素符号列表。

我已经尝试过清除缓存/cookie、检查文档类型(应该没问题)并尝试更改悬停元素的选择器。这些东西没有用!

我想问一下你们是否也有一个元素符号列表或一个可悬停的下拉菜单？您使用的是哪种浏览器？

这是链接:www.vibro.no/mag/

代码如下:

CSS:

#menu-item-2022 {
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
position: relative;
display: inline-block;
}

.sub-menu {
display: none;
position: absolute;
background-color: black;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

ul > li {
list-style-type: none;
padding: 0px;
margin: 0px;
}

.sub-menu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.sub-menu a:hover {background-color: black;}

#menu-item-2022:hover .sub-menu {
display: block;
}

#menu-item-2022:hover #menu-item-2022 {
background-color: #3e8e41;
}

HTML: KATEGORIER

<li id="menu-item-2098" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2098 first-child"><a href="http://www.vibro.no/category/kategori-3/">WHATS UP SOCIETY?</a>
</li>

<li id="menu-item-2097" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2097"><a href="http://www.vibro.no/category/kategori-2/">SPOTLIGHT</a>
</li>

<li id="menu-item-2096" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2096"><a href="http://www.vibro.no/category/kategori-1/">UP &amp; COMING</a>
</li>

<li id="menu-item-2099" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2099 last-child"><a href="http://www.vibro.no/category/video/">VIDEO</a>
</li>

</ul>`

Answer 1

这可能有帮助

JS 代码

if($( ".nav-bar li" ).hasClass( ".sub-menu" )){
// if you want to use font-awesome or anything else. 
$('.nav-bar li::before').append('<span class="toggle-caret"><i class="fa fa-plus"></i></span>');
$('.nav-bar li .sub-menu').hide();
$(".nav-bar li").on('hover', function(){

    $('.nav-bar li .sub-menu').show();

});
};

CSS

nav.nav-bar li {
    list-style: none;
}

还没有测试过。