我有以下代码：
<style>
#items {width:300px;}
.item {width:100px;border:solid 1px #ccc;float:left;height:20px;overflow:hidden;}
.item:hover{height:auto}
</style>
<div id="items">
<div class="item">text 1<br>text 1<br>text 1</div>
<div class="item">text 2<br>text 2<br>text 2</div>
<div class="item">text 3<br>text 3<br>text 3</div>
<div class="item">text 4<br>text 4<br>text 4</div>
<div class="item">text 5<br>text 5<br>text 5</div>
<div class="item">text 6<br>text 6<br>text 6</div>
<div class="item">text 7<br>text 7<br>text 7</div>
<div class="item">text 8<br>text 8<br>text 8</div>
<div class="item">text 9<br>text 9<br>text 9</div>
<div class="item">text 10<br>text 10<br>text 10</div>
</div>
看到它在行动：
http://jsfiddle.net/6K7t4/
当div id悬停时,它应该扩展而不会移动其他div,如下所示：
http://shopping.kelkoo.co.uk/ss-shirt.html
另外,请建议如何实现跨浏览器解决方案.
如果可以使用纯css完成,我更喜欢这个解决方案.
如果没有,可以在没有插件的情况下以简单的方式使用jquery吗？
解决方法
看这个演示：
http://jsfiddle.net/6K7t4/24/
HTML：
<div id="items">
<div class="item"><div class="inner">text 1<br>text 1<br>text 1</div></div>
<div class="item"><div class="inner">text 2<br>text 2<br>text 2</div></div>
<div class="item"><div class="inner">text 3<br>text 3<br>text 3</div></div>
<div class="item"><div class="inner">text 4<br>text 4<br>text 4</div></div>
<div class="item"><div class="inner">text 5<br>text 5<br>text 5</div></div>
<div class="item"><div class="inner">text 6<br>text 6<br>text 6</div></div>
<div class="item"><div class="inner">text 7<br>text 7<br>text 7</div></div>
<div class="item"><div class="inner">text 8<br>text 8<br>text 8</div></div>
<div class="item"><div class="inner">text 9<br>text 9<br>text 9</div></div>
<div class="item"><div class="inner">text 10<br>text 10<br>text 10</div></div>
</div>
CSS：
#items {
width:300px;
}
.item {
width:100px;
border:solid 1px #ccc;
float:left;
height:20px;
z-index:0;
overflow:hidden;
position:relative;
}
.item:hover {
overflow:visible;
z-index:100;
}
.item:hover .inner {
z-index: 100;
}
.inner {
position: absolute;
background: white;
width: 100%;
}
每个.item现在都是相对定位的,并且有一个新的子项,它包含了所有内容.一旦div悬停,.item的溢出：隐藏变为溢出：可见,并且.inner的z-index设置为100(为了将其显示在其他div之上).
UPD：新的演示和更新的代码.对于IE7(z.index更改为.item：悬停,否则内部div隐藏在IE7中的其他.items下面)