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如果你不能匹配纯色）。

Answer 2

将此添加到您的 menu_link 默认 css

border-top: 5px solid transparent;

所以它最终是这样的；

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

如果要保留填充，可以将 设置box-sizing为border-box，但请记住，这是 css3 并且不适用于旧版浏览器

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

        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
    }

Answer 3

在悬停之前匹配顶部元素（填充和边框）：

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

http://jsfiddle.net/DPNLq/2/

Answer 4

工作示例 - http://jsfiddle.net/DPNLq/4/

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

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