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

DEMO：http://jsfiddle.net/4aqyzLt3/1/

菜单折叠水平

1 个答案: