如何在css垂直菜单旁打开子菜单？

Question

我需要使用CSS和<ul> <li>标签制作垂直菜单。但是当我把光标放在包含子菜单的链接上时，其他主要项目会移动到另一个地方 这是my jsfiddle 有人能帮助我吗？

Answer 1

而不是制作子菜单position: relative（仍然使其成为流程的一部分）而不是使用li position: relative和menu_sub position: absolute适当的left / right / top / bottom设置：

#menu li {
    position: relative;
}
#menu_sub {
    margin:0;
    padding:0;
    position: absolute;
    list-style:none;
    display:none;
    left: 70%;
    top: 0;
}

http://jsfiddle.net/Kc6m4/3/

Answer 2

Explosion Pills响应有效。就像这样：

通过浮动子菜单，您也可以打破常规流程，但仍保留与父级UL的关系：

http://jsfiddle.net/Kc6m4/4/

#menu li:hover ul {
    display: block;
    float: right;
    clear: none;
    position: absolute;
    top: -30px;
    left; 0;
}

然后使用顶部，左侧，右侧等调整位置。在上面的示例中，我使用负top位置来清除父列表项的高度，以便它们从大致相同的位置开始。