菜单悬停效果

时间:2012-05-31 16:49:34

标签: dynamic menu hover effect

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

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

1 个答案:

答案 0 :(得分:3)

不确定您的具体要求是什么,但是当您将鼠标移到它们上方时,如果列表项目如何稍微滑动,请查看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;
}

更多信息&amp;演示: