javascript - JS : dropdown content can't be displayed when navbar is fixed

标签 javascript

一旦我将行position:fixed添加到.navbar中以修复我的导航栏,下拉内容就无法再显示。任何想法,它会怎样以及我怎样才能在这里以正确的方式修复导航栏?

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

最佳答案

您不应该在 .navbar 中添加 overflow:hidden,正确的做法是:

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

See the demo

关于javascript - JS : dropdown content can't be displayed when navbar is fixed,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60475641/

相关文章:

javascript - 使用 jQuery 仅针对同一类中的一个元素

php - 使用 jQuery 的 .ajax() 函数从 php 脚本检索变量的最佳方法?

javascript - Chained or Dependent Select Zend_Form jQuery 删除或替换表单元素?

Javascript 在一个 HTML 页面内的页面之间旋转

javascript - WordPress 自定义元框多图片上传

javascript - 如何更改 chessboard.js 中的转弯?

javascript - 使用城市名称在 map 上放置标记,而不是在 JavaScript map 库中使用纬度和经度?

javascript - 正则表达式模式 - 简单的字符串模板,对象映射

javascript - 谷歌地图 : Cannot read property 'geometry' of undefined

javascript - react 福米克 : how to use custom onChange and onBlur