Question

我有一个导航栏，其中一个元素包含下拉内容。导航条形码来自w3schools网站。（http://www.w3schools.com/css/css_navbar.asp）在菜单下方，我使用 plotly 添加了一个SVG，它隐藏了下拉内容。

有没有办法让导航栏在顶部（包括下拉内容）？

（我已经通过删除SVG验证了下拉内容是否可见）

以下是示例代码：

HTML

new_temp_obj

CSS

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>
<div id="myDiv" class="plotly" ></div>

https://jsfiddle.net/5qktcvwb/

Answer 1

我刚刚为下拉内容添加了 z-index 属性，现在可以看到。

.dropdown:hover .dropdown-content {
    display: block;    
    z-index: 1;
}

https://jsfiddle.net/5qktcvwb/4/

SVG隐藏的导航栏

1 个答案: