图像悬停菜单css位置拖动其他菜单项内容

Question

我有悬停图片菜单，有一些设计问题，当我将鼠标悬停在图像上时，我可以看到悬停菜单，但它拖动其他菜单项，到目前为止我发现了一些问题

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

如果我评论位置而不是拖动问题解决但悬停设计受到干扰，

位置需要将悬停菜单项保持在顶部， 任何帮助将非常感谢修复CSS位置问题。 看看我在Firefox浏览器上做了什么

  

预期解决方案：我希望悬停菜单显示与jsfiddle示例和gif中显示的相同，但

     

不想拖动其他菜单项

jsfiddle Example

Answer 1

试试这个可能对你有用---

@-moz-document url-prefix() { 
.#makesSelector .rangeList {
position:absolute;
right:0;
top:0;
 }
}

在某些情况下，为{Firefox}提供right:0和left:0解决了position:absolute问题。

希望这有帮助！

Answer 2

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

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

更新了jsfiddle