css - 如何打开 CSS 垂直菜单旁边的子菜单？

Question

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

Answer 1

而不是制作子菜单position: relative（仍然使其成为流程的一部分），而是使用适当的///设置来包含li position: relative和：menu_sub position: absoluteleftrighttopbottom

#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

爆炸药丸反应有效。就像这样：

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

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

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

Then you adjust the position using top, left, right, etc. In my example above, I used a negative top position to clear the height of the parent list item so they start at roughly the same position.