Goarge Go Goarge Go - 4 years ago 136
CSS Question

image hover menu css position dragging other menu items content

I have hover image menu, there's some design problem, when i hover mouse over image i am able to see hover menu but it dragging down other menu items, as far i figured out some issue found here

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

position is required to keep hover menu items on top if i comment position than dragging problem solved but hover design disturbed,
any help would be highly appreciated to fix css position issue.
Take a look as far what i did on Firefox browser

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
enter image description here

pol pol
Answer Source

To prevent the "dragging" you will need to add back the absolute positioning on the #makesSelector .rangeList.
Use top: 100% and left: 0 to align it. Remove any other margins.
Then, make its parent relative position: #makesSelector {position:relative;} and remove overflow: hidden.

I've added comments in the code so you can see what was added and what was removed.

Updated jsfiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download