小编use*_*715的帖子

好吧,这就是问题所在:我用三个菜单项制作了这个简单的菜单,每次我将鼠标悬停在它上面时,我想将每个div移动到右边(简单,对吧？不幸的是......)

虽然它可以轻松制作动画,但它根本不会放松,结果不是流畅的,而是块状的,根本不冷静.

我也在网上和StackOverflow上搜索,并应用了所有修复/建议,但我无法让它工作.

这是代码(例如,尝试在jsFiddle上)

HTML:

<div id="menu-container">
   <div class="menu1">Menu 01</div>
   <div class="menu2">Menu 02</div>
   <div class="menu3">Menu 03</div>
</div>

CSS:

#menu-container div{
    height: 30px;
    width: 200px;
    border:1px solid #999;
    background-color:#222;
    color:#ccc;
    left: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#menu-container div:hover{
    position: relative;
    color:#fff;
    background-color:#333333;
    left: 20px;
    padding-left: -20px;
}

#menu-container div.menu1:hover{
    border-color: red;
}

#menu-container div.menu2:hover{
    border-color: blue;
}

#menu-container div.menu3:hover{
    border-color: green;
}

我究竟做错了什么？有办法解决吗？

提前致谢