How to expand div left?

Question

How to expand left this div? its only expanded right, i try everthing , but it's still not working please help

<div id="menu"></div>

#menu
{
float:right;    
width:33px;
height:33px;
overflow:hidden;
background:#0F0;
position:absolute;
z-index:3;  
left:49%;
-moz-transition-property: width; /* Firefox 4 */
-moz-transition-duration: 1s; /* Firefox 4 */
-webkit-transition-property: width; /* Safari and Chrome */
-webkit-transition-duration: 1s; /* Safari and Chrome */
-o-transition-property: width; /* Opera */
-o-transition-duration: 1s; /* Opera */
}       

#menu:hover
{
width:180px;
}

Answer 1

Try this:

<style>
    #menu {
        width:33px;
        height:33px;
        position:absolute;
        background:#0F0;
        overflow:hidden;
        z-index:3;
        transition: width 1s;
        -moz-transition: width 1s;
        -webkit-transition: width 1s;
        -o-transition: width 1s;
        right:49%;
    }
    #menu:hover {
        width:180px;
    }
</style>
<div id="menu"></div>