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

在侧栏上，如何在第一级菜单旁边打开辅助菜单？

1 个答案: