Html 水平折叠菜单

我想做一个水平折叠的菜单。当您将鼠标悬停在某个项目上时，子菜单应该在右侧折叠，但问题是，正如您在演示中看到的，子菜单正在悬停的项目上折叠

html:

我希望有人能帮我把子菜单放在正确的地方

#menu ul ul{
position: absolute;
display: none;
background-color:red;
    left:100%;
   width:100%;
    top:0;

}

您应该给出位置：相对于LI标记（父项）：

演示：

body{
margin: 0px;
padding:0px;
}
.banner{
color: #ccc;
font-size: 20px;
font-family: Arial;
padding-bottom: 15px;
padding-top:15px;
width:100%;
}
#menu{
background-color:#222;
min-width:20%;
width: auto;
height:100%;
position: absolute;
}
#menu ul{
margin: 0px;
padding:0px;
}
#menu ul li{
list-style-type: none;
padding-bottom: 15px;
padding-top:15px;
width:100%;
}
#menu ul li a{
text-decoration: none;
color: #ccc;
font-size: 20px;
font-family: Arial;
}
#menu ul li:hover{
background-color: white;
}
#menu ul li:hover a{
color: #222;
}
#menu ul li:hover ul{
display: block;
}
#menu ul ul{
position: absolute;
display: none;
background-color:red;
margin-left:auto;
}

#menu ul ul{
position: absolute;
display: none;
background-color:red;
    left:100%;
   width:100%;
    top:0;

}

#menu ul li{
list-style-type: none;
padding-bottom: 15px;
padding-top:15px;
width:100%;
    position:relative;
}