Question

im working on a website and i found a little problem with a css3 animation.. see when i hover the “home” button it pushes “about us” link .. how do i prevent that from happening?
here’s the code of it:

<div class="menu">
<ul>
<li id="one"><a href="">Home</a></li>
<li id="two"><a href="">About us</a></li>
</ul>
</div>

.menu ul{
margin: 0;
padding: 0;}

.menu li{
font-family: Helvetica, Arial sans-serif;
margin: 20px 10px;
display: inline-block;
*display: inline;}

.menu a{
position: relative;
color: #999;
text-decoration: none;
padding: 20px;
background-color: #DDD;
-moz-border-radius: 0 0 20px 20px;
-webkit-border-radius: 0 0 20px 20px;
-border-radius: 0 0 20px 20px;
-webkit-box-shadow: inset 10px -3px 10px #ccc;}

.menu a:hover{
background-color: #eee;
font-size: 150%;
-webkit-box-shadow: 0 0 0 #eee;
text-shadow: 0 0 10px #fff;
-webkit-transition: 0.5s ease;}

http://jsfiddle.net/nsdbV/

thank you 😀

Answer 1

By changing the font-size on :hover, you are changing the dimensions of the element and it’s the behaviour I would expect from the browser. Unless you use position: absolute instead of relative, the only way I can think to solve this is to use the transform property. I’ve ammended your example just a bit here: http://jsfiddle.net/nsdbV/2/

.menu a{
    display: inline-block;
    -webkit-transition: -webkit-transform 0.5s ease;
}
.menu a:hover{
    -webkit-transform: scale(1.5);
}​

Rather than just expanding the text, this scales the entire box by a factor of 150%. I’ve only shown the changes I made above, but the jsfiddle link should give you a good idea of how to use it. You’ll need to tweak the CSS a bit, but hopefully it gives you something to go on.