css - :hover covers only fixed region?

Question

这里是新手问题。

当我将鼠标悬停在菜单项上时，只会突出显示固定区域。问题是菜单上的下一项由 2 个长词组成，悬停不能覆盖全部，只能覆盖其中的一部分。这是实现它的代码:

navlist {
    margin-left: -3px;
    padding-left: 0px;
    white-space: nowrap;
    position: absolute;
    height: 26px;
    width: 777px;
    top: 225px;
    background: url(images/mb2.jpg) repeat-x top left;
    font-family: Arial;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 20px;
}
#navlist li {
    display: inline;
    list-style-type: none;
}
#navlist li a {
    padding: 3px 10px;
    height: 20px;
    width: 91px;
    display: inline;
    position: absolute;
    text-align: center;
    color: #FFF;
    text-decoration: none;
    margin-top: 5px;
}
#navlist li a span {
    padding: 3px 10px;
    height: 20px;
    width: 71px;
    display: inline;
    position: absolute;
    text-align: center;
    color: #FFF;
    text-decoration: none;
    margin-top: -5px;
    font-weight: bolder;
}


#navlist a:hover {
    background: #0687eb;
    height: 10px;
    cursor: pointer;
}

它是否可以修复(覆盖菜单项的两个词？我尝试使用宽度:91px；值 - 问题是它可以增加被覆盖的区域但它会变得很长并侵犯其他覆盖第一个时的菜单项)

谢谢。理想情况下，我只想突出显示文本(文本中的字母)——但不确定是否有可能对 2 个单词的元素执行此操作)

谢谢。

Answer 1

你的链接是两行文字，第二行不能悬停吗？
如果是这样，请尝试从 #navlist li a span 中删除高度。这可能会有所帮助，但也会破坏布局。