css - 如何向左扩展div？

Question

如何扩展左这个div？它唯一扩展的权利，我尝试一切，但它仍然无法正常工作请帮助

<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

尝试这个：

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