菜单按钮的造型

您好我想打一个菜单按钮应该是这样的，当它盘旋：菜单按钮的造型

enter image description here

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

enter image description here

您可能会注意到黑色边框与第一张图像不一样。

这里是我的代码（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; 
}

来源

2011-07-13 FlintOff

去除左，右 – Ibu

@ibu - 也是底部 –

如果你只指定顶部边框？ –

它看起来有点傻傻的没有任何填充..所以这就是我建议。堆栈溢出的英镑符号从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; 
}

来源

2011-07-13 23:46:04 MacGyver

试试这个，这将起作用。

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

来源

2011-07-13 23:49:41 Phphelp

它为我工作。 – Phphelp

测试FF5和IE8。看起来没问题。这些按钮是白色空间中的超链接。但可以根据需要更改悬停方式。

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

来源

2011-07-14 06:39:00 kheya

菜单按钮的造型

回答

相关问题