html - 鼠标悬停时 css3 边距缩小

Question

好的，

所以我在 css 中有一个带有 :hover 过渡的“3d”按钮。

这是html

<nav>
<ul class="hmenu">
    <li><a href="">Home</a></li>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
</ul>
</nav>

这是CSS

ul.hmenu {
margin-top: 9%;
z-index: 50;
width: 75%;
list-style: none;
}

ul.hmenu li {
float: left;
margin-left: 5%;
}

ul.hmenu li a:before {
content: "\2022\00a0";
color: #f00;
transition: color 1s ease;
}

ul.hmenu li a {
background: #333;
color: #fff;
display: block;
font: normal 100 1.5em Helvetica, sans;
padding: .5em;
box-shadow: 5px 5px 0 0 #f00;
transition: background-color 1s ease;
text-decoration: none;    
}

ul.hmenu li a:hover, ul.hmenu li a:active {
background-color: #f00;
box-shadow: none;
transform: translate(5px, 5px);
}

ul.hmenu li a:hover:before, ul.hmenu li a:active:before {
color: #fff;
content: "\203A\00a0";  
}

这是 JSFIDDLE:http://jsfiddle.net/etb6F/

我的问题是，如何防止按钮在 :hover 时稍微向左移动？我希望他们保持他们的位置，只是“按下”而不是向左移动。

Answer 1

通过转换，您还必须保持 li 固定宽度和高度，这样其他按钮才不会受到影响。

演示:http://jsfiddle.net/etb6F/3/

确切的 fiddle :http://jsfiddle.net/etb6F/4/