CSS - Text moves when hovering

Question

I've been at this for about an hour now, and cant seem to grip it.
Everytime I hover over this text (I'm wanting to put a background color for it to hover), the text moves, along with the bgcolor. Here is what I got:

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

Answer 1

Remove the padding in the hover declaration. Or simply move the padding to the anchor before the hover state, like the code below.

The reason the text is moving is there is no padding on the anchor, then when you hover, there's padding.

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

Answer 2

It's because of padding. Remove it then it will work just fine.