Always li items at top
<p>I have this html:</p>

<pre><code> &lt;ul class="logos"&gt;
                    &lt;li&gt;&lt;a href="deelnemers-details.html" title="ATAG"&gt;&lt;img src="content/img/vaste-afbeeldingen/atag.jpg" width="180" height="45" alt="ATAG" /&gt;&lt;/a&gt;
                        &lt;div class="info"&gt;
                            &lt;h2&gt;ATAG&lt;/h2&gt;
                            &lt;p&gt;some neat text here &lt;/p&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>In the ul are a lot of li items. Every li have a a tag and a div class info. The info div is the div for the information. When i hover over the <code>&lt;a&gt;&lt;img&gt;&lt;/a&gt;</code>. Then the <code>&lt;div&gt;</code> info is show.</p>

<p>But now my question about this code. I want that always the li items are on the top. Now when i hovering over the li. The info box come and the other li items going down. How can i fix this?</p>

<p><strong>This is the CSS:</strong></p>

<pre><code>/* logos */
#deelnemers .logos {
    position            : relative;
    padding             : 12px 0 0;
}

#deelnemers .logos li {
    display             : inline-block;
    position            : relative;
    vertical-align      : top;
}

#deelnemers .logos li a {
    display             : block;
    height              : 120px;
    width               : 180px;
    margin              : 0 30px 0 0;
    padding             : 5px;
    border              : 1px solid #ddd;
    background          : #FFF;
}

#deelnemers .logos li .info {
    width               : 180px;
    margin              : 0 0 15px;
    padding             : 5px;
    border-right        : 1px solid #ddd;
    border-bottom       : 1px solid #ddd;
    border-left         : 1px solid #ddd;
}
</code></pre>
