Question

I would like to create a hover effect like the left category menu on this demo page http://themeforest.net/item/mazine-wordpress-theme-a-wp-ecommerce-theme/full_screen_preview/198602

I tried to add padding-left:7px; in the css file, but this does not look the same.

Answer 1

Not sure what you’re asking exactly but if it’s about how the list items slide over a little when you move your mouse over them, check out this demo. It uses CSS3 transitions.

<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;
}

​

More info & demos:

• http://www.w3schools.com/css3/css3_transitions.asp
• http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/