所以我正在制作一个 div(childs)列表，它包含一个元素(这是一个 shoppingcard)，如果您将鼠标悬停在上面，应该会显示更多信息。我已经让它工作了，但它是一个列表，可以得到比 div(div 是“固定的”)可以容纳的更多的元素。所以它需要一个 overflow-x: auto;。但是当它有一个 overflow-x 时，它不再在 div(parent)之外显示菜单。我怎样才能让它出现在外面？
我的代码，你也可以在fiddle上看到
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="makerelative">
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
<div class="ItemContainer onHover">
<a>input</a>
<div class="popupMenu">
<button>button1</button>
</div>
</div>
</div>
</div>
</body>
最佳答案
尝试将 position: fixed; 添加到您的 popupMenu 并定位它->这将使它出现
关于html - 添加 "overflow: Scroll"后，如果悬停在子 div 上应该显示的隐藏 div 不再出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40300891/