MediaWiki:MenuSidebar.css

/* For MenuSidebar modify */
.skin-vector .mw-body {
    margin-left: 11em !important;
    padding: 1.25em 1.5em 1.5em 1.5em !important;
}
.skin-vector #mw-panel {
    padding-left: 0 !important;
    width: 10.5em !important;
}
.skin-vector #left-navigation,.skin-vector #content{margin-left:11em}
div#MenuSidebar{
    margin-bottom: 5rem;
    position: absolute;
    top: 200px;
    width: 100%;
}

div#MenuSidebar a.external{
    background:none;
    padding-right:auto;
}

div#MenuSidebar>:first-child {
    margin-top:0px;
    border-top:2px solid #f4c430;
}

div#MenuSidebar>:first-child>:first-child {
    box-shadow:none;
}

div#MenuSidebar>ul{list-style:none none;width:100%;margin:0px;background-color:rgba(20,20,20,0.6);border-top:2px solid #f4c430;border-bottom-right-radius:5px}

div#MenuSidebar ul {
    position:relative;
    font-size:0.9rem;
}

div#MenuSidebar>ul>li ul{display:block;opacity:0;pointer-events:none;visibility:hidden;transition:0.2s all ease-in-out;z-index:1;background-color:#373737;width:unset !important;white-space:nowrap}

div#MenuSidebar>ul ul {
    list-style: none none;
    position: absolute;
    left: 100%;
    width: 100%;
    top: 0px;
    margin: 0px;
    z-index:1;
    background-color: #333;
    box-shadow: -1px 2px 10px 0px rgba(0,0,0,0.4), -1px -2px 10px 0px rgba(0,0,0,0.4);
}

div#MenuSidebar ul li:first-child {
    box-shadow: none;
}
div#MenuSidebar > p {
    padding: 8px 10px;
    margin: 0px;
    cursor: default;
    color: #f4c430;
    font-weight: bold;
    margin-top: 8px;
    background-image: linear-gradient(225deg,#f4c430 5px,transparent 6px);
    background-color: rgba(30,30,30,0.6);
    box-shadow: 2px 0 5px black;
}
div#MenuSidebar>ul li:hover>ul{
    display: block;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

div#MenuSidebar li {
    position: relative;
    margin: 0px;
    box-shadow: inset 0 1px rgba(244, 196, 48, 0.5);
    transition: 0.15s all ease-in;
    z-index: 1;
}

div#MenuSidebar li b, div#MenuSidebar li a {
    padding: 5px 0px;
    padding-left: 18px;
    display: block;
    width: auto;
    height: 100%;
    font-weight: normal;
}

div#MenuSidebar a{
    transition:all 0.15s ease-in;
    color:#eaeaea;
}
div#MenuSidebar a:hover,div#MenuSidebar b:hover{
    color:black;
    background-color:#f4c430;
    text-decoration:none !important;
}
div#MenuSidebar b{
    cursor:default;
}
div#MenuSidebar ul li.child>b:hover::after{
    border-left: 0.45em solid black;
}
div#MenuSidebar li.child>a::after,div#MenuSidebar li.child>b::after{
    float:right;
    content: " ";
    border-top: 0.35em solid transparent;
    border-left: 0.45em solid #EAEAEA;
    border-bottom: 0.35em solid transparent;
    transform: translate(-0.2em, 0.2em);
}
div#MenuSidebar a.selflink{
    font-weight: bold;
    color: #f4c430;
    cursor: default;
}

div#MenuSidebar a.selflink:hover{
    background-color:inherit;
    color:#f4c430;
}

div#MenuSidebar>ul>li:last-child>a,div#MenuSidebar>ul>li:last-child>b {
    border-bottom-right-radius: 5px;
}

div#MenuSidebar a.selflink::before {
    content:"";
    display:block;
    position:absolute;
    left:0px;
    top:50%;
    transform:translateY(-50%);
    border-top:6px solid transparent;
    border-bottom:6px solid transparent;
    border-left:6px solid #f4c430;
}