CSS下拉菜单.位于左侧栏.第一个子菜单盒的位置不正确(顶部)

Question

示例此处http://jsfiddle.net/yysdged6/19/

教程在这里http://line25.com/tutorials/how-to-to-cete-a-pure-css-dropdown-menu

html喜欢这个

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Option One</a>
    <ul>
    <li><a href="#">Option One 1</a> </li>
    <li><a href="#">Option One 1 longer</a> </li>
    </ul>
</li>
</ul>
</nav>

如果我通过Option One移动光标，我希望子菜单出现在与Option One

的同一行中

喜欢这里

Home
Option One   Option One 1
             Option One 1 longer

但是我得到了这个

Home         Option One 1
Option One   Option One 1 longer

这是CSS

nav ul ul { display: none; }
nav ul li:hover > ul { display: block; }
nav ul {
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after { content: ""; clear: both; display: block; }
nav ul li a { 
display: block;  
}
nav ul ul { 
/* */ position: absolute; left: 100%; top: 0;
/* position: relative; */
/* position: absolute; left: 100%; top: 100%; */
background: grey;
}
nav ul ul li {
float: none;
position: relative;
width: 160px;
}
nav ul ul ul { position: absolute; left: 100%; top: 0; }

我知道这是因为在nav ul ul position: absolute; left: 100%; top: 0;中而不是top: 0;中需要其他东西。但是我不明白什么？

对于更深层次的水平的比较位置是正确的。不正确的位置仅适用于1级子菜单。

Answer 1

您只需要从ul元素中删除相对位置，然后将其添加到lihttp://jsfiddle.net/yysdged6/20/