下拉内容可见，溢出滚动-解网

问：

我已经为我当前的问题创建了看起来很可怕的演示。问题是，我怎样才能让 overflow-y 作为滚动，而 overflow-x 可见，而可扩展内容在其所有大小上仍然可见（没有被 div 末尾剪切）？

在此示例中，可展开内容以全尺寸显示，而不会溢出，但溢出时，它只是用边框剪切。尝试了包装器的解决方法，但实际上它根本不起作用:(

body {
background-color: cyan;
}

.leftnav {
width: 8em;
height: 5em;
padding-right: 7em;
background-color: green;
color: white;
overflow-y: scroll;
overflow-x: visible;
direction: rtl;
}

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

.dropdown-content {
  color: black;
  display: none;
  position: absolute;
  left: 5em;
  top: -1em;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 8px;
  z-index: 2;
}

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

<body>
<p></p>


<div class="leftnav">

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>



</body>

HTML CSS 下拉列表

$(function() {
  // whenever we hover over a menu item that has a submenu
  $('.dropdown').on('mouseover', function() {
    var $menuItem = $(this),
        $submenuWrapper = $('> .dropdown-content', $menuItem);
    
    // grab the menu item's position relative to its positioned parent
    var menuItemPos = $menuItem.position();
    
    // place the submenu in the correct position relevant to the menu item
    $submenuWrapper.css({
      top: menuItemPos.top,
      left: menuItemPos.left + Math.round($menuItem.outerWidth() * 0.75)
    });
  });
});

body {
background-color: cyan;
position: relative;
}

.wrapper {position: relative;}

.leftnav {
width: 8em;
height: 5em;
padding-right: 7em;
background-color: green;
color: white;
overflow-y: scroll;
overflow-x: visible;
direction: rtl;
}

.dropdown {
  display: inline-block;
}

.dropdown-content {
  color: black;
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 8px;
  z-index: 2;
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<p></p>

<div class="wrapper">


<div class="leftnav">

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>
<br>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>

</div>

</div>

</body>

上一个：输入顶部的自动完成结果 [关闭]

下一个：将所选文本粘贴到另一个文本区域

下拉内容可见，溢出滚动

Dropdown content visible with overflow scroll

评论