Q:

jQuery menu script confusion

Well, I am not that good in jQuery, but at least I've tried to right a script by myself. 
So, here the thing.
I've got that navigation, with a "Services" button. When I hover over, the drop down menu appears, and in order not to distract users, "Main", "About" and "Contact" (.navigation__elem_mod-opa) change their style to opacity: .30. 
But the deal is that - now, when the "Services" is hovered over, the opacity for those tags (.navigation__elem_mod-opa), should come back to normal (opacity: 1). Well, that's the problem. In this part I've got confused what to do next.
Thanks in advance!
http://codepen.io/anon/pen/wMYQwG?editors=0010
$('li.navigation__elem.navigation__elem_mod-rel').hover(function() {
  $('.navigation__elem_mod-opa').css('opacity', '.30');
  $(this).children('ul').stop().fadeToggle('fast');
});

A:

I'd separate it:

On hover, show the submenu.
On mouseover (which is like hover), add a class opac to all other li elements which is opacity: .3;
On mouseout, remove that class.
$('li.navigation__elem.navigation__elem_mod-rel').hover(function() {
  $(this).children('ul').stop().fadeToggle('fast');
});

$('li.navigation__elem.navigation__elem_mod-rel').mouseover(function() {
  $('.navigation__elem_mod-opa').addClass('opac');
});

$('li.navigation__elem.navigation__elem_mod-rel').mouseout(function() {
  $('.navigation__elem_mod-opa').removeClass('opac');
});

And a simple CSS rule:
li.opac {
  opacity: .3;
}

Codepen

