Search code examples
cssmenunavbarnavsubmenu

CSS-Nested submenu display same level as parent

Would like to ask how can I make my nested submenu to display at the same level as the parent?

I made a custon CSS to handle the nested sub-menu like this 

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;
display: block;
}    

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

This is the JSFiddle link

Solution

  • You are almost there. You just need to add the following to your CSS:

    .dropdown-menu > li {
    position: relative;
}

    This makes it so the absolute positioning of your sub-menu is relative to the list-element, not the entire list.