Html CSS 3级下拉菜单

所以我在使用3层css下拉菜单时遇到了问题。第1级和第2级工作正常，但第3级没有正确显示，我希望第3级向右分支。第三级是反物质和氘标签，应该来自“燃料”链接

我的问题有点棘手。对于那些不能让它工作的人，我的代码如下。

谢谢大家

这是我的html：

<div id="nav">
            <ul>
                <li id="firstNavItem"><a href="index.html">Home</li>
                <li><a href="Warp.html">Warp</a>
                    <ul>
                        <li><a href="Warp-how-it-works.html">How it works</a></li>
                        <li><a href="Warp-Engine.html">Warp Engine</a></li>
                        <li><a href="WarpFactors.html">Warp Factors</a></li>
                        <li><a href="">Fuel</a>
                            <ul>
                                <li><a href="Anti-Matter.html">Anti-Matter</a></li>
                                <li><a href="Deuterium.html">Deuterium</a></li>
                           </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="Fact-or-Fiction.html">Fact or Fiction</li>
                <li><a href="StarTrek.html">Star Trek</a>
                    <ul>
                        <li><a href="Enterprise.html">Enterprise</a></li>
                        <li><a href="Voyager.html">Voyager</a></li>
                    </ul>
                </li>
                <li><a href="about.html">About</a></li>
            </ul>
      </div>

---

三个步骤，你有你的3级下拉列表

首先，当悬停在你的第一个关卡上时，你只想显示第二个关卡。因此，您不应该使用

#nav li:hover ul

，而应该使用

#nav li:hover>ul

第二，如果你想让你的第三级在它的父级的右边，你需要将它的位置设置为相对，所以添加

position:relative在您的班级中
#nav li li

最后，要在其父级右侧显示第三级，必须添加新样式：

#nav li li ul{
    position:absolute;
    top:0;
    left:100%;
}

更新后的JSFIDLE是否有一个好看的3级下拉列表

#nav li li ul{
    position:absolute;
    top:0;
    left:100%;
}