How to make vertical submenu expands to the right - css

Question

I'm creating a web with a vertical navigation menu on the left. In this menu, I have several submenus which I would like to be expanded to the right when the mouse hovers the parent item.
Here is the html
<div id="leftmenu">
<ul>
<li>Item</li>
<li>item
<ul>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
<li>Item
<ul>
<li>SubItem</li>
<li>SubItem</li>
<li>SubItem</li>
</ul>
</li>
<li>item
<ul>
<li>SubItem</li>
<li>SubItme</li>
<li>SubItem</li>
</ul>
</li>
<li>item</li>
<li>Item</li>
</ul>
</div>
And here is my CSS
#leftmenu {
float: left;
margin: 30px;
font-weight: bold;
background: linear-gradient(#ffeb99, #ffe066);
border: 0;
border-radius: 10px;
}
#leftmenu ul {
position: relative;
border-radius: 10px;
display: inline-block;
}
#leftmenu ul ul {
display: none;
background: #e7c702;
}
#leftmenu ul li:hover > ul {
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
left: 100%;
}
#leftmenu ul li a {
padding: 15px 30px;
display: block;
color: #757575;
text-decoration: none;
font-size: 15px;
text-transform: uppercase;
}
My problem is when I hover the mouse to an item that has subitems, the subitems appear but it down not in the same line as its parent item. Instead, it appears in the same line of the item the item I'm hovering. I'm learning CSS so I don't want to use any JavaScript in this case.
Please help me with this.
Sorry if I format something wrong since this is my first post here.
Thank you

Answer 1

You must write the <ul> tags before the <a> tags. Since, the <ul> is later going to be positioned as absolute, it is not going to affect the position of <a> tag...
I've edited the css a little bit to make it better, (hope you don't mind):
#leftmenu {
float: left;
margin: 30px;
font-weight: bold;
background: linear-gradient(#ffeb99, #ffe066);
border: 0;
border-radius: 10px;
}
#leftmenu ul {
position: relative;
border-radius: 10px;
display: inline-block;
list-style: none;
padding: 10px;
}
#leftmenu ul ul {
display: none;
background: #e7c702;
position: absolute;
top: 0;
left: 100%;
}
#leftmenu ul li{
position: relative;
}
#leftmenu ul li:hover > ul {
display: block;
}
#leftmenu ul li a {
padding: 15px 30px;
display: block;
color: #757575;
text-decoration: none;
font-size: 15px;
text-transform: uppercase;
}
This should do the trick.
When an absolutely positioned element is styled inside an element,
that has a position which is not 'static', the 'top', 'left', 'bottom'
and 'right' css properties are relative to the parent container.
So here's what I did:
I changed the position of <li> tags to 'relative' and the submenu
<ul> top value as 'top : 0px;'. That's it.