Solved can't change single menu item background on mobile

HI there,
i'm building a website with divi and i have a problem.
i wanted to set 1 men item background in red and 1 item background in blue and it works on desktop view as you can see in the first image attached. To do this i gave the two items a css class and them a inserted this custom css:
.blu a {
padding: 10px !important;
background: #0083d7;
color: #fff !important;
border: 2px solid #0083d7;
}
.blu a:hover {
background: #fff;
color: #0083d7 !important;
opacity: 1 !important;
}

.rosso a {
padding: 10px !important;
background: #e20a16;
color: #fff !important;
border: 2px solid #e20a16;
}
.rosso a:hover {
background: #fff;
color: #e20a16 !important;
opacity: 1 !important;
}

Then, for mobile menu, to keep sub-items nested, i put the following code to body of divi theme:

<style type="text/css">
#main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
#main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
</style>
<script type="text/javascript">
(function($) {

function setup_collapsible_submenus() {
var $menu = $('#mobile_menu'),
top_level_link = '#mobile_menu .menu-item-has-children > a';

$menu.find('a').each(function() {
$(this).off('click');

if ( $(this).is(top_level_link) ) {
$(this).attr('href', '#');
}

if ( ! $(this).siblings('.sub-menu').length ) {
$(this).on('click', function(event) {
$(this).parents('.mobile_nav').trigger('click');
});
} else {
$(this).on('click', function(event) {
event.preventDefault();
$(this).parent().toggleClass('visible');
});
}
});
}

$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});

})(jQuery);
</script>

I save then i go to see my mobile menu. The sub items stay nested, but the main item, instead of haveing red and blue background, that's trasparent....so i can'r read te text inside, as you can see in my second attached email.

is there someone who can help me to make mobile menu equal to desktop menu? (i need to have mobile main item backgrond no more trasparent but blue and red)

thank you all!
Matteo from italy

 

www.formconsbattista.it
i switch off the coming soon mode, ok? I really thank you!

 

It works! Don't know how to say thank you....thank you so much!!!!!!!