Javascript 在oposite侧展开菜单

我有这个扩展菜单。如何使其从左向右展开，但图标仍将随着展开而移动？我试着用float:left，但是img没有移动。 这是我的代码：

.frame1 {
border: 1px solid #c4bcaa;
height: 145px;
width: 50px;
position: absolute;
left: 531px;
top: 99px;
border-radius: 5px;
z-index: 9;
} 

.menu {
z-index: 10;
width: 600px;
height: 50px;
position: relative;
top: 100px;
left: 101px;
font-family: "Trebuchet MS", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
  } 

.menu2 {
z-index: 11;
width: 600px;
height: 50px;
position: relative;
top: 300px;
left: 100px;
font-family: "Trebuchet MS", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
} 

.menu1 {
width: 600px;
height: 50px;
position: relative;
top: 210px;
left: 100px;
font-family: "Trebuchet MS", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
} 

.item {
border: 1px solid;
position: absolute;
background-color: #c5d1e8;
float: right;
width: 44px;
margin: 0px 5px;
top: 262px;
right: 16px;
height: 39px;
border: 2px solid #ddd;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 3px #c5d1e8;
-webkit-box-shadow: 1px 1px 3px #c5d1e8;
box-shadow: 1px 1px 3px #c5d1e8;
cursor: pointer;
overflow: hidden;
} 

.item1 {
z-index: 11;
border: 1px solid;
position: absolute;
background-color: #f0f0f0;
float: right;
width: 44px;
margin: 0px 5px;
top: 148px;
right: 15px;
height: 40px;
border: 2px solid #ddd;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 3px #555;
-webkit-box-shadow: 1px 1px 3px #555;
box-shadow: 1px 1px 3px #555;
cursor: pointer;
overflow: hidden;
}  

.item2 {
border: 1px solid;
position: absolute;
background-color: #f0f0f0;
float: right;
width: 44px;
margin: 0px 5px;
right: 115px;
bottom: 110px;
height: 40px;
border: 2px solid #ddd;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 3px #555;
-webkit-box-shadow: 1px 1px 3px #555;
box-shadow: 1px 1px 3px #555;
cursor: pointer;
overflow: hidden;
}

.img {
position: relative;
bottom: 3px;
right: 1px;
} 

.item_content {
border: 1px solid;
position: relative;
height: 10px;
width: 300px;
left: 56px;
bottom: 76px;
background: transparent;
display: none;
} 

.item_content h2 {
position: relative;
color: #aaa;
text-shadow: 1px 1px 1px #fff;
background-color: transparent;
font-size: 14px;
top: 15px;
} 

.item_content a {
background-color: transparent;
float: left;
margin-right: 7px;
margin-top: 3px;
color: #bbb;
text-shadow: 1px 1px 1px #fff;
text-decoration: none;
font-size: 12px;
}  

.item_content a:hover {
color: #0b965b;
}