jquery - 图像悬停菜单CSS位置拖动其他菜单项内容

Question

我有悬停图像菜单，存在一些设计问题，当我将鼠标悬停在图像上时，我能够看到悬停菜单，但它会拖下其他菜单项，据我所知，这里发现了一些问题

#makesSelector .rangeList { /*position: absolute;*/ }

如果我评论位置而不是拖动问题解决但悬停设计受到干扰，则需要位置以将悬停菜单项保持在顶部， 任何帮助解决 css 位置问题将不胜感激。 看看我在 Firefox 浏览器上做了什么

Expected solution: i want hover menu appear same as shown in jsfiddle example and gif but

don't want dragging other menu items down

jsfiddle Example

Answer 1

为防止“拖动”，您需要在 #makesSelector .rangeList 上添加绝对定位。
使用 top: 100% 和 left: 0 对齐。删除任何其他边距。
然后，使其父级相对位置:#makesSelector {position:relative;} 并移除 overflow: hidden。

我在代码中添加了注释，因此您可以查看添加的内容和删除的内容。

已更新 jsfiddle