html - 菜单按钮样式

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

试试这个，这会起作用。

#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;
}