How to: style custom menu top margin

I have in the sidebar a custom menu but I have the problem that the first menu item’s background color extends all the way to the top of the sidebar when selected.

It seems that .widget_nav_menu has a margin all the way to the top.

You can see this on the front page of http://populair.eu.

FYI: these are my twentytwelve customizations:

/*
Theme Name: Populair.eu
Theme URI: http://populair.eu
Description: Child theme for the Twenty Twelve theme
Author: Edward de Leau
Author URI: http://edward.de.leau.net
Template: twentytwelve
Version: 0.1.0
*/
@import url("../twentytwelve/style.css");

/* 1. move sidebar to the left */
/*-- move sidebar to the left --*/
@media screen and (min-width: 600px) {
    .site-content {
        float: right!important;;
    }
    .widget-area {
        float: left!important;
    }
}

/* for IE8 and IE7 ----------------*/
.ie .site-content {
    float: right!important;;
}
.ie .widget-area {
    float: left!important;;
}
/* 2. makes the body background transparant */
#page, #site-generator {background-color:transparent!important;}

/* 3. make lines red */
hr {background-color: #ff0000!important;margin: 1em 0 1em 0!important;}

/* 4. remove padding of body + shadow */
body .site {
    padding: 0px!important;
    padding: 0rem!important;
    margin-top: 0px!important;
    margin-top: 0rem!important;
    margin-bottom: 0px!important;
    margin-bottom: 0rem!important;
    box-shadow: none!important;
}

/* 5. change text color of widget area */
.widget-area {color: #fff!important;}
.widget-area a {color: #fff!important;}

/* 6. float widget area to right and adjust width*/
.widget-area {
    float:left!important;
    width: 200px!important;
}
.menu-s-container { float:left!important;margin-right:5px!important;width:195px!important;}
.textwidget {float:left!important;}

/* 7. move content to the left instead of center */
.site {
    margin: 5px!important;
}

/* 8. change body colors to white */
body, a, p {color:#fff!important;}

/* 9. style menu */
.menu li a {color:#fff;font:20px arial;letter-spacing:1px;text-decoration:none;padding-top:0px;padding-bottom:5px;display:block!important;}
.menu ul li a {color:#fff;font:12px arial;letter-spacing:1px;padding-top:2px;padding-bottom:2px;display:block!important;}
.menu li a:hover {color:#000!important;background-color:#ccc!important;}
.menu ul li a:hover  {color:#000!important;}
.current-menu-item a:hover {color:#000!important;}
.current-menu-item > a {background-color:#ff0000!important;color:#fff!important;font-weight:bold;display:block!important;}
.menu li:not(.current-menu-item) {color:#fff!important;background-color:#333!important;}
.widget_nav_menu {margin-top:0px;}
.widget-area .widget {margin-bottom:0rem;}

/* 10. remove boxes from images */
img { box-shadow: none!important; }

/* 11. remove site navigation */
#site-navigation {
	display: none;
}

/* 12. remove WP footer */
.site-info{display:none;}

/* 13. smaller sidebar bigger content */
.site-content {width: 79%;}
.widget-area {float: right;width: 25%;}