Vertical Menu Right

HTML code

<div id="s"></div>
<div id="menu4">
    <ul>
        <li><a href="#">home</a></li>
            <li><a href="#">dress</a></li>
            <li><a href="#">shoes</a></li>
            <li><a href="#">about us</a></li>
<ul>

 </div>

CSS code

#s{
float:left
width:800px;
height:400px;
}
#menu4{
float:right;
width:100px;
height:400px;
margin-top:50px;
margin:0px;
  padding:0px;
}
#menu4 ul{
list-style:none;
}

#menu4 ul li{
float:right;
margin-top:15px;
background-color:#333333;
width:160px;
padding-top:10px;
padding-bottom:10px;
border-radius:20px 0px 0px 20px;
padding-right:20px;
box-shadow:-3px 2px 10px black;
-webkit-transition:padding-right 0.6s;
-moz-transition:padding-right 0.6s;
}

#menu4 ul li:hover{
padding-right:50px;
background-color:#666666;
}

#menu4 a{
float:right;
color:#FFFFFF;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;

}


Result