Accordion anomoly

[mentalist]

I have this accordion code from somewhere, however when you come from the right hand-side all the elements shrink even though you're over the purple / last one... How to fix please?

 

The CSS:

<style>

.accordionH {

    margin: 30px auto;

    padding: 0;

    list-style-type: none;

    overflow: hidden;

    width: 800px;

    height: 200px;

}



.accordionH li {

    margin: 0;

    padding: 0;

    overflow: hidden;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    

    -webkit-transition: all 0.2s ease-in;

    -moz-transition: all 0.2s ease-in;

    transition: all 0.2s ease-in;

}



.accordionH li {

    width: 160px;

    height: 200px;

    float: left;

}



.accordionH:hover li {

    width: 50px;

}



.accordionH li:hover {

    width: 600px;

}

</style>

The HTML:

<ul class="accordionH">

    <li style="background-color:#f00;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua.</p>

    </li>

    <li style="background-color:#0f0;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua.</p>

    </li>

    <li style="background-color:#00f;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua.</p>

    </li>

    <li style="background-color:#0ff;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua.</p>

    </li>

    <li style="background-color:#f0f;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua.</p>

    </li>

</ul>

Also, the purple one flickers at times, especially when bringing the mouse in from the top or bottom?

Supposedly "backface-visibility" is supposed to fix it, or suggested was to use 3D transition instead, but prefer not...!?

 

 

Cheers