如何在菜单上悬停边框

时间:2013-07-17 09:09:43

标签: html css menu hover menuitem

我需要在菜单的每个部分进行边框悬停。 在第一部分它没关系,但当我悬停其他元素时,左边框和菜单看起来很糟糕。

我不需要在每一侧(左,右)有双边框,在正常状态和悬停状态下需要1个边框左边,1个边框右边。

示例: http://codepen.io/smithua/pen/vHJqp

我需要悬停的示例: http://yadi.sk/d/q2yfzwh76vwsS

6 个答案:

答案 0 :(得分:0)

在CSS中删除第26行,你就可以了。

答案 1 :(得分:0)

border-left-width: 1;(第26行)删除.clt_nav_tab ul li a {

刚注意到user1702965已经建议删除第26行:)

答案 2 :(得分:0)

这是因为您的边框在正常状态和悬停状态下的大小不同。

处于正常状态,使用您的代码:

border: 1px solid #E5E3E3;
border-left-width: 0;

你有边框(顶部,右边,底部,左边)(1px,1px,1px,0px)。

但是在悬停状态下,使用代码

border: 1px solid #f88307;

你有边框(顶部,右边,底部,左边)(1px,1px,1px,1px)。 所以它意味着在悬停状态下,菜单的总大小比1px大。当你进入悬停状态时防止它增长的一个技巧是在两种状态下修复它的大小。例如,您可以替换该行(在正常状态下):

border-left-width: 0;

行:

border-left: 1px solid #f7f7f7;

这样你的菜单每边都会有一个1px的边框。

答案 3 :(得分:0)

尝试border-left:0; in .clt_nav_tab ul li a:hover class

答案 4 :(得分:0)

仅更改第39行的边框颜色。

答案 5 :(得分:0)

添加边框会在悬停时影响width的{​​{1}}。

而是尝试使用

li