This question is inspired by a discussion on Stack Overflow that you can read here. Everything seems to be working fine, except when the 2nd level item is not at the top. In the example provided, the item with the 2nd level menu is the first item. If you move that item down one or two spots, the 2nd level menu opens at the top.
After inspecting the CSS code, it all looks good. I also considered that it might be related to the version of Bootstrap used in one of the demo links mentioned 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;
}
(Check out the Fiddle).
In order to resolve this issue, I tried rearranging elements in the sandbox within Fiddle and encountered the same problem. It appears that the issue is not related to my code or the version of Bootstrap being used. I am open to exploring alternative methods as long as I can achieve a 2nd level menu that opens on hover on full-size screens.
Thank you,
Dave