Submenu not working properly

Hi everyone,

i am new to wordpress. i chose the evolve theme and am really happy with it but i am having some issues with the submenu.

For some reason, it comes out all grey and the subcategories do not fit the box. i would like it to be clean and white.

See at :

Here is an extract of the code (i hope it is the relevant one) :

/* Level Menu */
ul.nav-menu a { -webkit-transition: all 0.1s ease-in; /* Saf3.2+, Chrome */
-moz-transition: all 0.1s ease-in; /* FF4+ */
-ms-transition: all 0.1s ease-in; /* IE10? */
-o-transition: all 0.1s ease-in; /* Opera 10.5+ */
transition: all 0.1s ease-in;display: block; position: relative; padding: 0px 10px;color:#FFFFFF; }
ul.nav-menu a:hover,ul.nav-menu li.current_page_item a,ul.nav-menu li.current_page_parent a,ul.nav-menu li.current_page_ancestor a,
ul.nav-menu li.current-menu-item < a,ul.nav-menu li.current-menu-parent < a, ul.nav-menu li.current-menu-ancestor < a
{text-decoration: none; background:#fff;-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.1);-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.1); }

ul.nav-menu > li.current-menu-item, ul.nav-menu > li.current-menu-ancestor {text-decoration: none;background:rgba(255,255,255,.3) url(library/media/images/menu-item.png) left bottom no-repeat;}

ul.nav-menu > li.current-menu-item > a, ul.nav-menu > li.current-menu-ancestor > a

ul.nav-menu > li.current-menu-item:before, ul.nav-menu > li.current-menu-ancestor:before {content:”;background:url(library/media/images/menu-item-after.png) bottom right no-repeat;position: absolute;right: 0;top:0;width:7px;height:100%;}

ul.nav-menu li.current-menu-ancestor li.current-menu-item > a, ul.nav-menu li.current-menu-ancestor li.current-menu-parent > a {border-top-color:#aaa;text-decoration: none; background:#fff;}

ul.nav-menu .sf-sub-indicator {position:absolute;z-index:999;right:0.5em;top:45%;width:10px;height:10px;overflow:hidden;}
ul.nav-menu .sf-with-ul:after {content:’\f078′;font-family: FontAwesome !important;position: absolute;right: 1.6em;top:20%;width: 5px;font-size:10px!important;}
ul.nav-menu li ul .sf-sub-indicator {top:41%;}
ul.nav-menu ul.sub-menu .sf-with-ul:after {content:’\f054′;font-family: FontAwesome !important;position: absolute;right: 1.6em;top:10%;width: 5px;font-size:10px!important;}
.sticky-header ul.nav-menu ul.sub-menu .sf-with-ul:after, .sticky-header ul.nav-menu .sf-with-ul:after,
ul.nav-menu ul.sub-menu li.page_item .sf-with-ul:after, ul.nav-menu li.page_item .sf-with-ul:after {top:40%;}

ul.nav-menu li.current-menu-item, ul.nav-menu li.current-menu-ancestor, ul.nav-menu li:hover {border-right-color:#ddd!important;}

ul.nav-menu li li a,ul.nav-menu li li li a,ul.nav-menu li li li li a {padding: 20px;}

ul.nav-menu li li,ul.nav-menu li li li,ul.nav-menu li li li li { border-left:none;border-right:none;}

ul.nav-menu li a.sf-with-ul {padding-right: 25px;}

Any help would be highly appreciated.

Thanks a lot !