JS：修复导航栏时无法显示下拉内容

Question

Once I added the line position:fixed into the .navbar to fix my navbar, the dropdown content could not be displayed anymore.一旦我将行 position:fixed 添加到 .navbar 以修复我的导航栏，下拉内容就无法再显示了。 Any Idea, how it could be and how can I fix the navbar in a right way here?任何想法，它怎么可能以及如何在这里以正确的方式修复导航栏？

    <html>
    <head>
    <style>
    .navbar {    
     position: fixed;       
     width: 200px;   
     overflow: hidden;  
     background-color: #333;  
    }   
   .dropdown {  
    float: left;  
    overflow: hidden;  
   }  
  .dropdown-content {  
    display: none;  
    position: absolute;   
  }  
 .dropdown-content a {  
   text-decoration: none;  
   text-align: left;  
  }  
 .dropdown:hover .dropdown-content {  
  display: block;  
}
</style>
</head>
<body>
<div class="navbar">
<div class="dropdown">
   <button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
  <a href="#">Link 1</a>
</div>
</div> 
</div>
</body>
</html>

Answer 1

You shouldn't add overflow: hidden in .navbar , the right way:你不应该添加overflow: hidden in .navbar ，正确的方法：

.navbar {
  position: fixed;
  width: 200px;  
  background-color: #333;
}

See the demo看演示

JS：修复导航栏时无法显示下拉内容

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-03-01 14:02:58

JS：修复导航栏时无法显示下拉内容

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-03-01 14:02:58

解决方案1
0 已采纳 2020-03-01 14:02:58