html - BBC风格的菜单悬停效果

Question

可行的解决方案:

http://jsfiddle.net/DPNLq/5/

---

原始问题:

我正在尝试创建类似于 BBC 网站上的菜单悬停效果:

http://www.bbc.co.uk/

在悬停的链接底部创建一行的顶部菜单。我正在尝试做类似的事情，但我想排在最前面。

我创建了以下示例，以说明我遇到的问题:

http://jsfiddle.net/DPNLq/1/

<a href="#" class="menu_link">link 1</a>
<a href="#" class="menu_link">link 2</a>
<a href="#" class="menu_link">link 3</a>

a.menu_link{
    height:50px;
    display:block;
    float:left;
    margin-right:10px;
    padding:0px 5px 0px 5px;
}

a.menu_link:hover{
    border-top:5px solid black;
    padding-top:5px;
}

当鼠标悬停在我的示例链接上时，该行会将链接向下推。我不希望这种情况发生，而且我不知道如何阻止它发生。

有什么建议吗？

Answer 1

一直保持边界在那里。只是改变它的颜色。 (如果您无法匹配纯色，则来自 transparent)。