我的网站有一个固定的顶部导航栏和一个固定LHS导航栏。在LHS导航栏上，有一个月的列表，以及一个列出每个月内容的二级弹出菜单。你可以在这里看到现在的网站：网站
辅助弹出菜单的列表固定在顶部。如果您没有将鼠标悬停在辅助菜单项上，它就会关闭。因此，随着时间的推移，将无法通过辅助菜单导航到某些内容。解决方案是更改辅助菜单，使其相对于相应的月份，而不是固定在顶部。这就是我的知识不足的地方，我很难用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; }
如果编码顺序有点混乱，我很抱歉，这是我创建的第一个网站——我大部分时间都是边做边学。
提前感谢所有回复！
在以下规则中将此属性添加到css中：
#leftbarlinks li
{
position: relative;
}
同时为了防止子菜单在将光标移向它们时消失，添加以下内容：
#leftbar ul li ul
{
margin-left: -5px;
}