Html 设置两级菜单样式（第二级）

我有两级水平菜单，效果很好。 第二级不是下拉菜单，它显示在第一级菜单项“单击”上，并水平位于第一级菜单下方

我需要第一级和第二级菜单始终从容器的左侧开始，并且是容器的全宽，目前只有第一级菜单是这样工作的，但第二级菜单不是这样。它在激活的第一级菜单项下启动

您可以在JSFIDLE中看到它：

HTML

<div class="header">
    <nav id="site-navigation" class="main-navigation" role="navigation">
        <div class="menu-top-menu-container">
            <ul id="menu-top-menu" class="main_nav">
                <li><a>H1</a>
                    <ul class="sub-menu">
                        <li class="menu-item"><a href="">Prevent</a></li>
                        <li><a href="#">Avoid</a></li>
                        <li><a>P2</a></li>
                    </ul>
                </li>
                <li class="current-menu-item"><a href="#">Sol</a>    
                    <ul class="sub-menu">
                        <li><a>Jan</a></li>
                        <li><a href="">Janu2</a></li>
                        <li><a href="">Janu3</a></li>
                    </ul>
                </li>
                <li><a href="">Why </a>
                    <ul class="sub-menu">
                        <li><a href="">Electri</a></li>
                        <li><a href="">Envir</a></li>
                    </ul>
                </li>
                <li><a href="">Manag</a></li>
            </ul>
        </div>
    </nav>
</div>

---

我相信这可以通过一些相对定位来实现，但我没能做到这一点。我的定位有问题。请给我一些指导。

添加

左：0；宽度：100%到您的.sub菜单规则

.sub-menu {
    display: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
    background-color: #061361;
    height: 26px;
    line-height: 26px;
    left:0;
    width:100%;
}

嗯，我不太清楚你在找什么——不过，我会尽力帮你

我在现有CSS定义中添加了以下样式：

#menu-top-menu {
    position:relative;
}

.sub-menu {
    left:0;
    bottom:-26px;
    margin-left:40px;
    width:100%;
}

您会注意到，我确实使用了
position:relative
，正如您所怀疑的那样。下面是一个演示这些附加样式实现了什么

如果这不是你想要的，请随时告诉我，我会很乐意进一步帮助你。祝你好运
 对于上下文示例来说，您的jsFiddle（）非常糟糕。
#menu-top-menu {
    position:relative;
}

.sub-menu {
    left:0;
    bottom:-26px;
    margin-left:40px;
    width:100%;
}