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

我的网站有一个固定的顶部导航栏和一个固定的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; }

如果编码顺序有些混乱，这很抱歉，这是我创建的第一个网站-我在进行过程中大部分时间都在进行整理。

预先感谢您的所有回复！