菜单按钮样式

Question

嗨我想制作一个菜单按钮，当它悬停时应该是这样的：

但我做了一些看起来像这样的事情

您可能会注意到黑色边框不是第一张图像的正方形。

这是我的代码（CSS）：

#menu a:hover{
    border-top: 5px solid #333333;
    border-left: 5px solid #666666;
    border-right: 5px solid #666666;
    border-bottom: 5px solid #666666;
    background-color: #666666;
    color: #FFF;
}

Answer 1

没有任何填充可能看起来有点傻..所以这就是我推荐的。堆栈溢出的磅符号从CSS签名中删除

#menu a {
    border-top: 5px solid #333333;
    border-left: 5px solid #666666;
    border-right: 5px solid #666666;
    border-bottom: 5px solid #666666;
    background-color: #666666;
    padding: 5px 50px 5px 50px; /*<====================== added this*/
    color: #FFF;
}

#menu a:hover {
    border-top: 5px solid #333333;
    border-left: 0px solid #666666; /*<========== changed this for hover effect*/
    border-right: 5px solid #666666;
    border-bottom: 5px solid #666666;
    background-color: #666666;
    padding: 5px 50px 5px 50px; /*<========================== added this*/
    color: #FFF;
}

Answer 2

试试这个，这样可行。

#menu a:hover{
    border-top: 5px solid #333333;   
    background-color: #666666;
    color: #FFF;
}
#menu a{
    border-top: 5px solid #333333;    
    background-color: #666666;
    color: #FFF;
}

Answer 3

在FF5和IE8中测试过。看起来不错。按钮是白色空间中的超链接。 但是你可以根据需要改变样式。

#menu a:hover{
    border-top: 5px solid #333;   
    background-color: #666;
    padding: 0 5px 5px 5px;
    color: #FFF;
}