Navbar second submenu not positioned correctly

Question

This question is based on a thread here on SO Here This works all fine, unless the 2nd level item is not on top. In the example given, the item with the 2nd level menu is the first item. if you move the item down one or two spots, the 2nd level opens at the top.

The CSS, looks good, I also thought maybe it had to do with the Bootstrap version in the one demo link in the thread

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

(Fiddle).

So to eliminate that issue, I moved it around in the sandbox, from Fiddle, and got the same issue, so it seems it is not with my code, or Bootstrap version. I am not attached to doing it this way, I am fully open to using something different, as long as I can have 2nd level menu, and open on hover on full size screens.

Thanks,

Dave

Answer 1

UPDATED

I just added

.dropdown-menu .sub-menu{
  top: auto !important;
  margin-top:-30px !important;
}

and it seems to work fine, please check if this is what you want.

Here is fiddle