イメージホバーメニューCSS位置他のメニュー項目をドラッグする

Question

イメージ上にマウスを置くと、ホバーイメージメニューが表示されます。イメージ上にマウスを置くと、ホバーメニューが表示されますが、他のメニュー項目をドラッグすると、いくつかの問題がここに

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

を発見した位置は、私は任意のヘルプは非常にCSSの位置の問題を修正するためには理解されるであろう、 を問題解決が、ホバーデザインが邪魔をドラッグするよりも、位置をコメントする場合は上にホバーメニュー項目を維持するために必要とされます。 Firefoxブラウザに限り、私がやったことを見てみましょう

期待ソリューション：私はホバーメニューをしたいjsfiddle例およびGIFのように同じように表示されますが、

は、他のメニュー項目をドラッグしたくありませんダウン

jsfiddle Example

Answer 1

「ドラッグ」を防止するには、#makesSelector .rangeListに絶対配置を追加する必要があります。
top: 100%とleft: 0を使用して調整します。他の余白を削除します。
次に親の相対位置：#makesSelector {position:relative;}を作成し、overflow: hiddenを削除します。

追加された内容と削除された内容を確認できるように、コードにコメントを追加しました。

更新jsfiddle

Answer 2

right:0を与えるいくつかのケースでは

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

とleft:0は、Firefox用のposition:absolute問題を解決します---それはあなたのために働くかもしれない、これを試してみてください。

希望すると便利です。