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

【问题标题】：On a sidebar, how do I make the secondary menu open up next to the first-level menu?在侧边栏上，如何使二级菜单在一级菜单旁边打开？
【发布时间】：2015-11-02 04:29:38
【问题描述】：

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

抱歉，如果编码顺序有点混乱，这是我创建的第一个网站 - 我主要是在进行过程中收集东西。

提前感谢所有回复！

【问题讨论】：

标签： html css menu position submenu

【解决方案1】：

在这条规则中将此属性添加到您的 css 中：

#leftbarlinks li
{
    position: relative;
}

为了防止子菜单在将光标移向它们时消失，请添加：

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

【讨论】：

不客气，如果有帮助请接受我的回答:)