/* define a fixed width for the entire menu */
.navigation {
width: 300px;
height:550px;
overflow-y:scroll;
}
/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
list-style: none;
padding: 0;
margin: 0;
}
/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
display: block;
background-color: #fff;
text-decoration: none;
padding: 10px;
color: #000;
}
/* add hover behaviour */
/*.mainmenu a:hover {
background-color: var(--main-sec-color)!important;
}
*/
/* when hovering over a .mainmenu item,
display the submenu inside it.
we're changing the submenu's max-height from 0 to 200px;
*/
.mainmenu li:hover .submenu {
display: block;
max-height: 100%;
}
/*
we now overwrite the background-color for .submenu links only.
CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/
.submenu a {
background-color: #ffc97a;
border-bottom:1px solid #333;
font-size:13px;
padding-left:5px;
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
background-color:#f1a908!important;
}
/* this is the initial state of all submenus.
we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
overflow: hidden;
max-height: 0;
-webkit-transition: all 5000s ease-in;
}
