html - Padding to list item? -

trying make small navigation here. jsfiddle below.

http://jsfiddle.net/s3king93/yjkdr/

is there way add padding link items without having text larger or move?

i'd ideal http://i.imgur.com/0zdt0vr.png

any ideas?

html

<div class="list-1">     <ul class="list-style-1">         <li><a href="">home</a></li>         <li><a href="">influences</a></li>         <li><a href="">about me</a></li>         <li><a href="">classes</a></li>         <li><a href="">andrews video blog</a></li>         <li><a href="">photography</a></li>     </ul> </div> 

css

.list-1 {     padding:none;     float: right;     clear:right;     padding-right: 27px; }  .list-style-1 {     padding-top: 26px;     list-style-type: none;     font-family: "bell gothic std light";     font-size: 20px; }  a:link {     text-decoration:none;     color: #2a2a2a; }  a:visited {     text-decoration:none;     color: #2a2a2a; }  a:hover {     text-decoration:none;     color: #69e0f6;     background-color: #2a2a2a;     padding-left: 5px;     padding-right: 70px; }  a:active {     text-decoration:none;     color: #69e0f6;     background-color: #2a2a2a } 

<ul> block-element default don't need div around it.

plus, on a:hover have padding-right set 70px. that's why list moving when you're hovering. don't understand though why have padding on hover. if remove paddings on hover list remain is.

is want?