function hover() {
  var $work = $('.navbar > ul > li:nth-child(1)');
  var $workafter = $('.navbar > ul > li:nth-child(1)::after');
  var $cat = $('.navbar > ul.tags');

  $work.hover(
    function() {
      $( this ).addClass( "hover" );
      $(this).parents().find('.tags').addClass("visible");
    }, function() {
      $( this ).removeClass( "hover" );
      $(this).parents().find('.tags').removeClass("visible");
    }
  );

  $cat.hover(
    function() {
      $( this ).addClass( "visible" );
      $(this).parents().find($work).addClass('hover');
    }, function() {
      $( this ).removeClass( "visible" );
      $(this).parents().find($work).removeClass('hover');
    }
  );
}

function active() {
  var $work = $('.navbar > ul > li:nth-child(1)');

  $work.click(function(event) {
    $(this).parents().find('.tags').toggleClass("active");
  });
}

jQuery(document).ready(function($) {
  active();
  hover();
});
