Vertical drop down menu left (HTML & CSS)

HTML code

<div id="menu2">
    <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>
                <ul>
                    <li><a href="#">contact us</a></li>
                    <li><a href="#">our social media</a></li>
                    <li><a href="#">our company</a></li>
                </ul>
            </li>
        <ul>

  </div>

CSS code

#menu2{
margin:0px;
padding:0px;

}
#menu2 ul{
float:left;
}

#menu2 li{
display:block;
list-style:none;
background:#404040;
border:#00CC00;
width:150px;
padding-top:10px;
padding-bottom:10px;
padding-left:30px;
position:relative;
left:-40px;
}

#menu2 ul li:hover{
background:#7A7A7A;
border-bottom:2px #DADADA dashed;
}

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

#menu2 ul ul{
display:none;
}
#menu2 ul li:hover ul{
display:block;
position:relative;
top:-34px;
left:150px;

}
#menu2 ul ul li{
display:block;

}

Result

Vertical menu left (HTML & CSS)

HTML code

<div id="menu">
    <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

#menu{
float:left;
margin-top:50px;
margin:0px;
  padding:0px;
position:relative;
left:-50px;
}
#menu ul{
list-style:none;
}

#menu ul li{
margin-top:15px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
background-color:#333333;
width:160px;
padding-top:10px;
padding-bottom:10px;
border-radius:0px 20px 20px 0px;
padding-left:20px;
box-shadow:5px 0px 10px black;
-webkit-transition:padding-left 0.6s;
-moz-transition:padding-left 0.6s;
}

#menu ul li:hover{
padding-left:50px;
background-color:#666666;
}

#menu a{
color:#FFFFFF;
text-decoration:none;
}

Result