Bootstrap раскрывающееся меню исчезает, прежде чем разрешить выбор пункта меню

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, но это, похоже, не учитывает проблему, поскольку это также происходит, если я изменю ее на простую гиперссылку.

Как заставить меню оставаться открытым, пока не будет выбран нужный пункт меню?