html - CSS-悬停时文字 move

我已经在这里待了大约一个小时，似乎无法捕获它。
每当我将鼠标悬停在此文本上时(我想将背景颜色悬停在此文本上)，文本就会与bgcolor一起 move 。
这是我得到的:

        #innerheader ul {
            list-style:none;
            margin:0;
            padding:0;
        }
        #innerheader li {
            display:block;
            float:left;
            height:25px;
            margin:0 2px;
            padding:15px 10px 0 10px;
            color:#FFFFFF;
            font-weight:bold;
            font-size:10px;
            text-transform:uppercase;
        }

        #innerheader li a,
        #innerheader li a:link,
        #innerheader li a:visited,
        #innerheader li a:active {
            color:#FFFFFF;
            text-decoration:none;
        }
        #innerheader li a:hover {
            background-color: blue;
            padding: 10px 10px 10px 10px
        }

最佳答案

删除悬停声明中的填充。或简单地将填充移至悬停状态之前的 anchor ，如下面的代码。

文字 move 的原因是 anchor 上没有填充，因此当您将鼠标悬停时，会有填充。

#innerheader li a,
    #innerheader li a:link,
    #innerheader li a:visited,
    #innerheader li a:active {
        color:#FFFFFF;
        text-decoration:none;
        padding: 10px;
    }
    #innerheader li a:hover {
        background-color: blue;
    }