[Dark19]

z=index еще погляди, пригодится.
Увы нет возможности писать тебе пример, но можешь глянуть демку какой нибудь cms-ки или html-шаблона. Таких вот штук тьма особенно в шаблонах для интернет-шопов, если поискать немного точно найдешь пример (вроде стандартный opencart'овский шаблон даже этим же грешит)

Уже все почти вышло. Вот код одной карточки:

<div class="test">
                <a href="#" class="test2">
                    <div class="product">
                        <div class="product-img">
                            <img src="images/product7.png" alt=""/>
                        </div>
                        <h2>Сопутствующие товары</h2>
                    </div>
                </a>
            </div>

блок с содержимым контентом добавляю через jquery вот так:

$('.product').append("<div class='product-popup'><ul><li>Wilo</li><li>Saer</li><li>Grundfos</li><li>Lowara</li><li>Расширительные баки</li></ul></div>");

, стили задал для блоков через css:

.main-products .test2{
    display: block;
    width: 176px;
    overflow: hidden;
}

.main-products .test:nth-child(3n+1){
    margin-left: 0;
}
.main-products .test2:hover{
    background-color: #fff;
    border: 2px solid #b1cfed;
    box-shadow: 0px 0px 2px 1px #CCC;
}
.test{
    float: left;
    width: 176px;
    overflow: hidden;
    margin-left: 5px;
    padding: 2px;
}

. Потом опять же через jquery меняю стили:

$('.test2').hover(
        function(){
                $(this).css({'position':'absolute', 'z-index':'99999'});
                $(this).find('.product-popup').each(function(){
                $(this).css({'display':'block'});
                })
        },
            function(){
            $('.product-popup').css({'display':'none'});
            $('.test2').css({'position':'static', 'z-index':'1'});
            });

Все вроде бы работает, но каждый последний блок в строке подминает под себя первый в следующей строке и ничего с этим не могу сделать. Почему так выходит?