Vertical accordion menu css

i need to adjust accordion vertical menu css. I do not understand how to adjust the sub menu li

  <div id="menuleft">
    <div class="top">header</div>
  <ul>
    <li><a href="#">Main 1</a>
     <ul>
      <li><a href="#">Sub 1</a></li>
      <li><a href="#">Sub 1</a></li>
    </ul>
   </li>
   <li><a href="#">Main 2</a></li>
   <li><a href="#">Main 3</a></li>
   <li><a href="#">Main 4</a></li>
   </ul>    
  </div>

This is the css:

#menuleft{
position: absolute;
bottom:0px; left:100px;
height: 100%;
width: 160px;
background-color: #BAB3D6;
}
#menuleft .top{
float:right;
width: 160px;
color:#FFFFFF;
font-size:110%;
margin:20px 0px 20px 0px;
height: 30px;
}
#menuleft ul{
position:absolute;
width: 160px;
top:130px;
left:0;
margin: 0;
padding: 0;
}
#menuleft li{
width: 130px;
height: 30px;
left:0; 
font-size: 95%;
line-height: 30px; 
list-style: none;
cursor:pointer;
}
#menuleft li a { 
text-decoration:none; 
display: block; 
width: 100%; 
height: 100%; 
padding-left:30px;
vertical-align:middle;
}
#menuleft ul ul li a { 
text-decoration:none; 
display: block; 
width: 100%; 
height: 100%; 
padding-left:30px;
vertical-align:middle;
background-color: #d8d4e8;
}
#menuleft li a:hover{
background-color:#652D91;
color:#FFFFFF;
font-weight:bold;   
}
#menuleft li a:active {
background-color:#ad45c5;
color:#FFFFFF;
}

After this I use jquery for expand and collapse submenus Thanks in advance for the help

this is the JSfiddle

UPDATE

With misterManSam help now it works but I have still a little problem, when I expand the sub menu their back ground is not uniform as you can see, it makes a little click, this is Jfiddle.

JSfiddle

Solution

Remove position: absolute from #menuleft ul and position with a top margin.
Remove the height on #menuleft li
Give the top level ul a class (here .nav) and style that instead of #menuleft ul so that second level uls are not styled.
Give the .nav the same background as #menuleft. This will ensure that there is a background behind the links even at very small heights.

Also, ensure that all the default margin and padding is removed from the ul and the list items.

Demo

ul,li { margin: 0; padding: 0; }
#menuleft {
  position: absolute;
  bottom: 0px;
  left: 100px;
  height: 100%;
  width: 160px;
  background-color: #BAB3D6;
}
#menuleft .top {
  float: right;
  width: 160px;
  color: #FFFFFF;
  font-size: 110%;
  margin: 20px 0px 20px 0px;
  height: 30px;
}
#menuleft .nav {
  width: 160px;
  margin-top: 130px;
  margin: 130px 0 0 0;
  background-color: #BAB3D6
}
#menuleft li {
  width: 130px;
  font-size: 95%;
  line-height: 30px;
  list-style: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}
#menuleft li a {
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 30px;
  vertical-align: middle;
}
#menuleft ul ul li a {
  text-decoration: none;
  display: block;
  width: 100%;
  height: 100%;
  padding-left: 30px;
  vertical-align: middle;
  background-color: #d8d4e8;
}
#menuleft li a:hover {
  background-color: #652D91;
  color: #FFFFFF;
  font-weight: bold;
}
#menuleft li a:active {
  background-color: #ad45c5;
  color: #FFFFFF;
}

<div id="menuleft">
  <h1 class="top">header</h1>

  <ul class="nav">
    <li><a href="#">Main 1</a>
        <ul>
            <li><a href="#">Sub 1</a></li>
            <li><a href="#">Sub 1</a></li>
        </ul>
    </li>
    <li><a href="#">Main 2</a></li>
    <li><a href="#">Main 3</a></li>
    <li><a href="#">Main 4</a></li>
  </ul>
</div>