菜单悬停效果

【问题标题】：Menu hover effect菜单悬停效果
【发布时间】：2012-06-05 23:05:30
【问题描述】：

我想在此演示页面上创建类似于左侧类别菜单的悬停效果http://themeforest.net/item/mazine-wordpress-theme-a-wp-ecommerce-theme/full_screen_preview/198602

我尝试添加 padding-left:7px;在 css 文件中，但这看起来不一样。

【问题讨论】：

显示您的代码？也许我们可以帮助解决您的问题？
看起来他们使用 jQuery 动画效果来设置 padding-left 的 LI 标签。尽管就像@JohnRiselvato 所说的那样，我们必须查看您的代码才能看到您在做什么不同。

标签： dynamic menu hover effect

【解决方案1】：

不确定您要问的确切内容，但如果是关于当您将鼠标移到列表项上时它们如何滑过一点，请查看this demo。它使用 CSS3 过渡。

<ul id="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

#menu li {
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;    
    transition:all 0.2s ease-in-out;
}
#menu li:hover {
    padding-left:7px;
}

更多信息和演示：

【讨论】：