CSS Cascade Menu: Position <div> relative to <li> - html

Question

I want to build a cascade menu where at a certain <li> a new menu is opened. Here is the HTML code:
<div className='ux-dropdown-menu-container'>
<ul className='ux-dropdown-menu'>
<li className='ux-dropdown-menu-item'><a href='#'>Menu Item 1</a></li>
<li className='ux-dropdown-menu-item'><a href='#'>Menu Item 2</a></li>
<li className='ux-dropdown-menu-item'><a href='#'>Submenu</a></li>
<li className='ux-dropdown-menu-item'>
<div className='ux-dropdown-menu-container'>
<ul className='ux-dropdown-menu'>
<li className='ux-dropdown-menu-item'><a href='#'>SubMenu Item 1</a></li>
<li className='ux-dropdown-menu-item'><a href='#'>SubMenu Item 2</a></li>
<li className='ux-dropdown-menu-item'><a href='#'>SubMenu Item 3</a></li>
<li className='ux-dropdown-menu-item'>
</li>
</ul>
</div>
</li>
<li className='ux-dropdown-menu-item'><a href='#'>Menu Item 3</a></li>
</ul>
</div>
And my CSS classes:
.ux-dropdown-menu-container {
position: absolute;
display: block;
background-color: $ux-color-boxed-background;
border: solid;
border-color: $ux-color-border;
border-width: 1px;
border-radius: 4px;
box-shadow: 0px 2px 2px 0px $ux-color-border;
top: 105%;
text-align: left;
min-width: 100px;
}
.ux-dropdown-menu {
margin: 0px 0px 0px 0px;
list-style-type: none;
padding: 5px 5px 5px 5px; // top right botton left
z-index: 1;
}
.ux-dropdown-menu-item
{
white-space: nowrap;
position: relative;
}
.ux-dropdown-menu-item a {
display: inline-block;
text-decoration: none;
padding: 5px 5px 5px 5px;
color: $ux-color-text;
}
.ux-dropdown-menu-item:hover {
background-color: $ux-color-hover;
}
.ux-dropdown-menu-item:active {
background-color: $ux-color-click-background;
}
Even having a position: relative at my <li>, the new <div> for the submenu is not positioning there. Here is the result:
I expected the submenu to appear right at the side of the Submenu item.
I am now looking to:
(A) position the submenu right next to the Submenu item
(B) consider right or left opening, in case the menu is composed and the right side of the screen, where it then needs to open the menu to the left. I do not plan to use jQuery

Answer 1

body{
margin: 0; padding: 0;
}
.ux-dropdown-menu-container {
float: left;
}
.ux-dropdown-menu-containerItem {
position: absolute;
display: none;
background-color: $ux-color-boxed-background;
border: solid;
border-color: $ux-color-border;
border-width: 1px;
border-radius: 4px;
box-shadow: 0px 2px 2px 0px $ux-color-border;
top: 0;
text-align: left;
min-width: 100px;
left: 100%;
}
.ux-dropdown-menu-item:hover .ux-dropdown-menu-containerItem {
display: block;
}
.ux-dropdown-menu {
margin: 0px 0px 0px 0px;
list-style-type: none;
padding: 5px 5px 5px 5px; // top right botton left
z-index: 1;
}
.ux-dropdown-menu-item
{
white-space: nowrap;
position: relative;
border: 1px solid #ccc;
list-style: none;
}
.ux-dropdown-menu-item a {
display: inline-block;
text-decoration: none;
padding: 5px 5px 5px 5px;
color: $ux-color-text;
}
.ux-dropdown-menu-item:hover {
background-color: $ux-color-hover;
}
.ux-dropdown-menu-item:active {
background-color: $ux-color-click-background;
}
<div class="ux-dropdown-menu-container">
<ul class="ux-dropdown-menu">
<li class="ux-dropdown-menu-item">Menu Item 1</li>
<li class="ux-dropdown-menu-item">Menu Item 2</li>
<li class="ux-dropdown-menu-item">
Submenu
<div class="ux-dropdown-menu-containerItem">
<ul class="ux-dropdown-menu">
<li class="ux-dropdown-menu-item">SubMenu Item 1</li>
<li class="ux-dropdown-menu-item">SubMenu Item 2</li>
<li class="ux-dropdown-menu-item">SubMenu Item 3</li>
</ul>
</div>
</li>
<li class="ux-dropdown-menu-item">Menu Item 3</li>
</ul>
</div>