On a sidebar, how do I make the secondary menu open up next to the first-level menu?

Question

My site has a fixed top navigation bar, and a fixed LHS navigation bar. On the LHS navigation bar, there is a list of months, and a secondary popout menu listing contents for each month. You can see the site as it is now here: Site

The secondary popout menu's listings are fixed to the top. If you aren't hovering over a secondary menu item, it closes. Therefore, as the months go by, it will become impossible to navigate to some content via the secondary menu. The solution is to change the secondary menu so that it is relative to its corresponding month, rather than be fixed to the top. This is where my knowledge falls short and I struggle to write the solution in CSS (not using JS).

Here is the content:

 <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>

Here is the 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; }

Apologies if the coding order is slightly muddled, this is the first website I have created - I have mostly been picking things up as I go along.

Thanks in advance for all replies!

Answer 1

Add this property to your css inside this rule:

#leftbarlinks li
{
    position: relative;
}

And also to prevent the submenu from disappearing while moving cursor towards them add this:

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