Javascript 纯CSS等高列，底部边框悬停？

我希望在尝试使用纯css后，您能帮助我找到一个问题的解决方案

当用户将鼠标悬停在某列上时，我试图将

边框底部添加到该列中（请参见图片：1）。我遇到的问题是，由于这些
DIV
嵌套在一起，边框似乎彼此叠在一起（请参见图片：3）。我试图让所有的边界处于一个均匀的水平，因为我想要的效果是它们与灰线重叠

此外，图像中的灰色水平线将延伸至页面的100%宽度，并与黑色
边框底部处于均匀水平。当不悬停在任何标题（hi there！、contact、twitter）上时，我希望包含内容的列向上滑动，直到只有标题可见，这将是我唯一希望使用Javascript的内容。也许仅仅使用CSS不可能实现所有这些，或者有更好的方法来实现这些

**
使用
display:table
似乎比您当前使用的CSS技巧更容易解决这个问题


很难理解，即使在看了图片之后。您能在jsfiddle.net中创建一个简单的示例吗？感谢您的响应，显示了堆叠边界问题（由于DIV被嵌套）。我正在尝试重新设计顶部的设计，这可以在我的原始帖子中包含的图片中看到。我希望通过使用“等高”列教程来实现这一点，但也许有更好的方法来重新创建它？如果您试图为col3获取悬停边界，那么，您的鼠标悬停是针对div container3而不是div col3吗？我尝试将
边框底部添加到
#col3
中，但它将边框定位在内容的末尾，而不是列的底部。这将打破重叠效应，我正试图开始工作。谢谢你的帮助，尽管马特，我很感激。很棒的东西，非常感谢，但不幸的是它在IE7及以下版本中被破坏了。然而，它的功能完全符合我的想法。有没有办法让它在IE7及以下版本中优雅地降级？不幸的是，我不这么认为。您可能希望查看您的服务器日志，看看您有多少IE7/6用户。就在上周，微软宣布，他们将在1月份将所有IE7及以下浏览器自动更新为8或9，目标是IE6用户数<1%。我认为IE7应该接近相同。我的保守公司最终同意今年也放弃IE6/7。根据这些统计数据，IE7下降到3.4%左右，如果强制更新按计划进行，我预计到2012年年中，这一比例将达到1%左右。我已把你的答案标为解决办法。非常好的补充信息，非常感谢，节日快乐！
#container { display: table; }
.row { display: table-row; }
.row > div { 
    display: table-cell; 
    width: 100px; 
    border-bottom: 1px solid lightgray;
    padding-left: 10px;
}
.row > div:hover { border-bottom: 1px solid gray; }