Question

我有一个下拉菜单，通常在允许用户选择菜单项之前会消失。这个问题是断断续续的。有时，如果用户足够快地移动鼠标，则菜单会停留足够长的时间以选择一个项目。但是，大多数情况下，鼠标离开菜单标题后，整个菜单就会消失。菜单如下所示：

<div class="dropdown">
  <a data-toggle="dropdown" href="#"><asp:LinkButton ID="mmHeading" runat="server" Text="Category" OnClick="mmHandler_OnClick" CssClass="linkbutton"></asp:LinkButton></a>
  <ul class="dropdown-menu" style="background-color:grey"> 
    <li><asp:LinkButton ID="mmMenuItem1" runat="server" Text="&nbsp;Item1" OnClick="mmItem1_OnClick" CssClass="linkbutton"></asp:LinkButton></li>
    <li><asp:LinkButton ID="mmMenuItem2" runat="server" Text="&nbsp;Item2" OnClick="mmItem2_OnClick" CssClass="linkbutton"></asp:LinkButton></li>
    <li><asp:LinkButton ID="mmMenuItem3" runat="server" Text="&nbsp;Item3" OnClick="mmItem3_OnClick" CssClass="linkbutton"></asp:LinkButton></li>
  </ul>
</div>

CSS看起来像这样：

body {
    padding-top: 60px;
    padding-bottom: 40px;
}

.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}

.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

.linkbutton {
    text-decoration: none;
    color: white;
}

.linkbutton:hover {
    text-decoration: underline;
    color: yellow;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

当用户将鼠标悬停在标题上方时，菜单将展开。然后，当鼠标向下移动以实际选择一个项目时，它通常会消失。标题本身是ASP.NET LinkButton，但是似乎没有考虑到该问题，因为如果将其更改为简单的超链接，也会出现此问题。

在选择所需的菜单项之前，如何使菜单保持打开状态？

Bootstrap下拉菜单消失后，才允许选择菜单项

0 个答案: