列表元素内部的下拉菜单扩大了列表大小，难以访问

时间：2018-08-14 21:26:52

标签： javascript html css

我有一个包含列表的div。该列表包含多个下拉元素。选择列表底部的下拉元素时，列表的大小将扩展以容纳这些新元素。但是，除非用户向下滚动以单击它们，否则这些元素也将被隐藏。首选解决方案是使下拉元素出现在列表中所有其他元素的上方。但是，无论我尝试哪种组合，尝试通过z索引和绝对/相对定位来执行此操作似乎都行不通。我缺少这个问题的解决办法吗？

注意：全屏显示时最好模拟。

    /*CSS borrowed from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover*/
    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
    }
    
    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        z-index: 100;
    }
    
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover {background-color: #ddd}
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
    
    /* Other random CSS */
    
    .background {
      height : 500px;
      width  : 800px;
      background-color: #d47500
    }
    
    .list-holder{
      height : 300px;
      overflow-y : auto;
      background-color: #b2815b
    }
    <div class="background">
    
      <div class="list-holder">
      
        <ul>
        
          <li>
            <div class="dropdown">
              <button class="dropbtn">Dropdown</button>
              <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
              </div>
            </div>
          </li>
          
          <li>
            <div class="dropdown">
              <button class="dropbtn">Dropdown</button>
              <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
              </div>
            </div>
          </li>
          
          <li>
            <div class="dropdown">
              <button class="dropbtn">Dropdown</button>
              <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
              </div>
            </div>
          </li>
          
          <li>
            <div class="dropdown">
              <button class="dropbtn">Dropdown</button>
              <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
              </div>
            </div>
          </li>
          
    <!-- Problem -->
          <li>
            <div class="dropdown">
              <button class="dropbtn">Dropdown</button>
              <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
              </div>
            </div>
          </li>
      
      <!-- Problem -->
          <li>
            <div class="dropdown">
              <button class="dropbtn">Dropdown</button>
              <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
              </div>
            </div>
          </li>
          
      <!-- Problem -->
          <li>
            <div class="dropdown">
              <button class="dropbtn">Dropdown</button>
              <div class="dropdown-content">
              <a href="#">Link 1</a>
              <a href="#">Link 2</a>
              <a href="#">Link 3</a>
              </div>
            </div>
          </li>
        
        </ul>
      
      
      </div>
      
    </div>

我正在考虑的一种解决方案是使用javascript在所有其他div上方生成类似的下拉菜单。不幸的是，我不确定如何开始这样做。如果有人对方法有任何想法，请告诉我。

编辑：

  • 此实现必须使用固定的列表大小。

1 个答案:

答案 0 :(得分：0)

如果您在导航的父容器上设置了absolute和显式的高度，则

z-index的定位和overflow-y: auto不会有帮助。如果删除这些内容，它将按照您的意愿进行操作，例如：

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    z-index: 100;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ddd}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

.background {
  height: 500px;
  background-color: #d47500
}

.list-holder{
  position: relative;
  background-color: #b2815b
}
<div class="background">
  <div class="list-holder">
  
    <ul>
    
      <li>
        <div class="dropdown">
          <button class="dropbtn">Dropdown</button>
          <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
          </div>
        </div>
      </li>
      
      <li>
        <div class="dropdown">
          <button class="dropbtn">Dropdown</button>
          <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
          </div>
        </div>
      </li>
      
      <li>
        <div class="dropdown">
          <button class="dropbtn">Dropdown</button>
          <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
          </div>
        </div>
      </li>
      
      <li>
        <div class="dropdown">
          <button class="dropbtn">Dropdown</button>
          <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
          </div>
        </div>
      </li>
      
      <li>
        <div class="dropdown">
          <button class="dropbtn">Dropdown</button>
          <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
          </div>
        </div>
      </li>
  
      <li>
        <div class="dropdown">
          <button class="dropbtn">Dropdown</button>
          <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
          </div>
        </div>
      </li>
      
      <li>
        <div class="dropdown">
          <button class="dropbtn">Dropdown</button>
          <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
          </div>
        </div>
      </li>
    
    </ul>
  
  </div>
</div>

相关问题
最新问题