css - Navbar second submenu not positioned correctly -
this question based on thread here on here works fine, unless 2nd level item not on top. in example given, item 2nd level menu first item. if move item down 1 or 2 spots, 2nd level opens @ top.
the css, looks good, thought maybe had bootstrap version in 1 demo link in 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 eliminate issue, moved around in sandbox, fiddle, , got same issue, seems not code, or bootstrap version. not attached doing way, open using different, long can have 2nd level menu, , open on hover on full size screens.
thanks,
dave
updated
i added
.dropdown-menu .sub-menu{ top: auto !important; margin-top:-30px !important; } and seems work fine, please check if want.
here fiddle
Comments
Post a Comment