html - 在侧边栏上，如何使二级菜单在一级菜单旁边打开？

Question

我的站点有一个固定的顶部导航栏和一个固定的 LHS 导航栏。在 LHS 导航栏上，有一个月份列表，以及一个列出每个月内容的二级弹出菜单。您可以在此处查看该站点:Site

二级弹出菜单的列表固定在顶部。如果您没有将鼠标悬停在二级菜单项上，它就会关闭。因此，随着时间的推移，将无法通过二级菜单导航到某些内容。解决办法是把二级菜单改成相对于对应的月份，而不是固定在最上面。这是我知识不足的地方，我很难用 CSS(不使用 JS)编写解决方案。

内容如下:

 <div id="leftbar">
    <ul id="leftbarlinks">
        <li>November 2015
            <ul id="secondarylinks">
                <li><a href="/dvi/insight/november2015content.html">Content List</a></li>
            </ul>
        </li>
        <li>October 2015
            <ul id="secondarylinks">
                <li><a href="/dvi/insight/october2015content.html">Content List</a></li>
                <li><a href="/dvi/insight/Q3-2015-Shell.html">Shell Q3 2015</a></li>
            </ul>
        </li>
    </ul>
</div>

这是 CSS:

/* Formatting the LHS vertical navigation bar (main navigation bar) on all pages */
#leftbar { position: fixed; top: 0; left: 0; height: 100%; width: 170px; text-align: left; color: rgba(53,56,57,0.97); background-color: rgba(53,56,57,0.97); margin-top: 40px; }
#leftbarlinks { white-space: nowrap; }
#leftbarlinks li { font-family: 'HelveticaNeue-Light', sans-serif; font-size: 20px; color: #E6E6E6; text-decoration: none; margin-left: -35px; line-height: 2; padding: 0; }
#leftbarlinks li:hover { color: #E4433F; text-decoration: none; cursor: pointer; }
#secondarylinks a { font-family: 'HelveticaNeue-Light', sans-serif; font-size: 18px; color: #E6E6E6; text-decoration: none; line-height: 1.5; list-style-type:none; }
#secondarylinks a:hover { color: #E4433F; text-decoration: none; cursor: pointer; }
#leftbar ul li ul { position: absolute; display: none; float: left; margin-top: auto; }
#leftbar ul li:hover ul {left: 170px; top: 0; display: block; text-decoration: none; list-style-type: none; }
#leftbar ul li ul li { background-color: rgba(20,22,22,1); line-height: 1.5; }

抱歉，如果编码顺序有点困惑，这是我创建的第一个网站 - 我大部分时间都是边做边捡东西。

提前感谢所有回复!

Answer 1

在此规则内将此属性添加到您的 css:

#leftbarlinks li
{
    position: relative;
}

同时为了防止子菜单在将光标移向子菜单时消失，请添加以下内容:

#leftbar ul li ul
{
    margin-left: -5px;
}