菜单水平折叠

Question

我正在尝试制作一个水平折叠的菜单。当你把鼠标悬停在一个项目上时，子菜单应该在右侧折叠，但问题是子菜单在悬停的项目上折叠，就像你在演示中看到的那样。

演示

html:

<div id="menu">
    <div class="banner">Site name</div>
    <ul>
        <li><a href="">item 1</a>
            <ul>
                <li><a href="">sub 1</a></li>
                <li><a href="">sub 2</a></li>
                <li><a href="">sub 3</a></li>
            </ul>
        </li>
        <li><a href="">item 2</a></li>
        <li><a href="">item 3</a></li>
        <li><a href="">item 4</a></li>
    </ul>
</div>

css：

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;
}

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

Answer 1

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

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

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

演示：http://jsfiddle.net/4aqyzLt3/1/