The Bootstrap
Hover menu with 2nd level items (1 post)

  1. livshin
    Posted 1 year ago #

    Adding my suggested fix to brianlmerritt's solution for on-hover menu instead of on-click:
    I had a problem with 2nd level menus opening without hovering on the direct parent.

    brianlmerritt suggests:

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

    My fix is changing:

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


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

    hope this helps.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic


No tags yet.