我有一个下拉菜单,如下:
它可以在其他页面上正常工作,但是在此页面上,有一个c3图表,其类定义中包含position: relative;
,而且我不知道如何更改它(它是直接从其api中加载的)。如果将鼠标悬停在如此低的水平以至图表的div,则导致下拉菜单消失。
如果我在chrome开发人员控制台中将其从“相对”更改为“静态”,则效果很好。我的下拉.css出问题了吗?还是有一种方法可以简单地覆盖位置:相对?
li a, .dropbtn {
color: white;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #333;
}
li.dropdown {
display: block;
float: right;
}
li.dropdown:hover {
display: block;
float: right;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
答案 0 :(得分:1)
尝试将z-index: 9999
添加到您的.dropdown-content
类中。那有什么作用吗?
此外,将position: relative
添加到您的li
中。您需要该下拉列表来知道其附加的父对象(因为它是position: absolute
)。执行此操作时,可能需要根据宽度将top
和left
调整为top: 100%; left: 0
。