nav .hackbox {display:none;}

nav>ul { background-color:#ccc; padding:15px !important; border:1p solid darkgrey; border-radius:5px; }

nav ul { list-style-type:none; width:300px; padding-left:0px; }

nav ul ul { max-height:0vh; overflow:hidden; transition:max-height 1s; width:275px; padding-left:25px; }

nav ul ul ul { width:250px; padding-left:25px; }

nav label { display:inline-block; width:20px; margin-right:3px; background-color:lightgrey; border-radius:3px; box-shadow:1px 1px 0px 0px; }

nav ul a { display:inline-block; border-bottom:1px solid grey; padding:3px; width:271px; margin-top:2px; border-radius:3px; background-color:#999; box-shadow:1px 1px 0px 0px; }

nav ul a:hover, nav ul .hackbox:checked ~ a:hover { background-color:red; }

nav ul ul a { width:246px; background-color:#bbb; }

nav ul ul ul a { width:221px; background-color:#ccc; }

nav ul .hackbox:checked ~ ul { max-height:100vh; }

nav ul .hackbox:checked ~ a { font-weight:bold; }

nav>ul>li>.hackbox:checked~label::before, nav>ul>li>ul>li>.hackbox:checked~label::before { content:"\21D3"; }

nav>ul>li>label::before, nav>ul>li>ul>li>label::before {
    content:"\21D2";
    position:relative;
    left:0.5ex;
}

nav label:hover {
    font-weight:900; background-color:red;
}