C# 悬停菜单跳转

我有一个web应用程序（ASP.NET2.0C）。在我的母版页上，我有一个菜单控件，我使用css样式表来设置菜单不同部分的样式。由于某种原因，当我将鼠标悬停在菜单上时，它会有一点跳跃。我想当我在它上面盘旋时，边界会变得更大

以下是整个菜单的样式：

.menu
{
    width:110%;
    height:25px;
    border: 1px solid gray;
    text-align:center;
}

以下是我的静态悬停风格：

.staticMenuHover
{
    background-color:#CCCCCC;
    border-style:solid;
    border-color:#888888;  
    text-decoration: underline;
    border-width:thin;
}

我不知道为什么会这样，有人能帮忙吗

---

谢谢

这是因为您在文本下面划线。尝试不使用文本装饰，我打赌它会解决您的问题。

这是因为您在文本下面划线。尝试不使用文本装饰，我打赌它会解决您的问题。

您的悬停类上的边框宽度设置为“瘦”，在我的测试中呈现为2像素边框。设置为1px

border-width:1px;

您还可以将第二个类的边界规则折叠为一行，使其与第一个类一致，如下所示：

border:1px solid #888888;

---

悬停类上的边框宽度设置为thin，在我的测试中，它呈现为2像素边框。设置为1px

border-width:1px;

您还可以将第二个类的边界规则折叠为一行，使其与第一个类一致，如下所示：

border:1px solid #888888;

---

您可以始终在链接中添加下划线（而不是文本装饰）并调整填充。工作示例：

#menu ul li a {
    display: block;
    width: 95%;
    padding: 0px 2px 2px 4px;
    text-decoration: none;
    color: rgb(30%,30%,60%); background: transparent;
}
#menu ul li a:visited {
    color: rgb(50%,10%,100%); 
}
#menu ul li a:hover {
    color: #000;
    border-bottom: 2px solid #c63; 
    background: #fcf;
    padding-bottom: 0px; }

---

这项工作的目的是将2px底部填充更改为0 px，并在相同规则中添加2px边框底部。更改颜色与当前问题无关。

您可以始终在链接中添加下划线（而不是文本装饰）并调整填充。工作示例：

#menu ul li a {
    display: block;
    width: 95%;
    padding: 0px 2px 2px 4px;
    text-decoration: none;
    color: rgb(30%,30%,60%); background: transparent;
}
#menu ul li a:visited {
    color: rgb(50%,10%,100%); 
}
#menu ul li a:hover {
    color: #000;
    border-bottom: 2px solid #c63; 
    background: #fcf;
    padding-bottom: 0px; }

这项工作的目的是将2px底部填充更改为0 px，并在相同规则中添加2px边框底部。颜色的变化与手头的问题无关