The attached can be achieved with "just" adding the following to custom.css:
#top_section {
position: relative;
}
#menu_nav {
padding: 6px;
position: absolute;
width: 180px;
display: block;
background-color: #eee;
margin-top: 20px;
border: 3px solid #4b863c;
border-radius: 5px;
}
.listlevel1#collapse_button, .listlevel1#button_profile {
float: none;
width: auto;
}
.listlevel1#collapse_button {
width: 22%;
}
#menu_nav .listlevel1 {
float: none;
}
#menu_nav .listlevel1:hover .menulevel2, #menu_nav .listlevel1.sfhover .menulevel2 {
left: 140px;
top: 25%;
}
#menu_nav .listlevel1#button_profile:hover .menulevel2, #menu_nav .listlevel1#button_profile.sfhover .menulevel2 {
left: 140px;
right: auto; /* may be useless */
}
#wrapper {
margin-left: 200px;
width: initial;
}
@media screen and (max-width: 50em) {
#menu_nav {
width: 50px;
}
#wrapper {
margin-left: 70px;
}
.wrapper {
min-width: initial;
width: auto;
margin-right: 0%;
}
#menu_nav .listlevel1:hover .menulevel2, #menu_nav .listlevel1.sfhover .menulevel2,
#menu_nav .listlevel1#button_profile:hover .menulevel2, #menu_nav .listlevel1#button_profile.sfhover .menulevel2 {
left: 40px;
}
#main_menu .subsections:hover .linklevel1:after {
text-shadow: 0;
color: transparent;
}
}
It may not be perfect though.