I am struggling to modify the vertical accordion menu CSS. I am having difficulty adjusting the sub-menu list items.
<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 2</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 my current 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;
}
I have also implemented jQuery for expanding and collapsing submenus. Any assistance would be greatly appreciated.
Here is the link for reference: JSfiddle
UPDATE
With the help of misterManSam, the submenu now works functionally. However, there is still a slight issue where the background of expanded submenus is not consistent. You can observe this in the updated JSFiddle provided.