Помощь по CSS

Всем привет. Нужна небольшая помощь по CSS.

Хочу понять как работает вот эта выпадайка при наведении на товары. http://rozetka.com.ua/mobile-phones/c80003/filter/preset=flagman_smartphones/

Что имеем: есть div с position: relative;

Что делать дальше? В этот div я пробовал засовывать свой div с display: none, и когда на родительский div наводишь, то у этого меняется на display: block; Но есть проблема: этот появляющийся div получается как костыль, т.е. он не дорисовывает родителя, а вылазит поверх него, т.е. получается некрасиво (насколько я понял, это связано с absolute). Пытался костылями сделать его визуально похожим, но там используется box-shadow, и получается что тени накладываются друг на друга, что становится заметным. Не люблю костыльный подход, и думаю, что есть способ сделать так чтобы этот див автоматически расширялся до нужных размеров и при этом не смещал нижние элементы, а дополнял их.

Короче, вопрос: как сделать чтобы все это было красиво? По сути, это азы CSS, который я к сожалению не учил, и мои знания в нем на уровне цвет поменять и т.д..

Если что, пациент: https://goo.gl/GZqSnj