Question

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

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

我已经尝试清除缓存/ cookie，检查doctype（应该没问题）并尝试更改悬停元素的选择器。这些东西不起作用！

我想问一下你是否还有一个子弹列表或一个可下拉的下拉菜单？您使用的是哪种浏览器？

这是链接： 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 CODE

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

没有测试过。

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

1 个答案: