изображение наведение меню 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

Попробуйте это может работать для вас ---

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

В некоторых случаях дает right:0 и left:0 решает проблему position:absolute для светлячок.

Надеюсь, это поможет!