cateogry dropdown in the menu

.css

.page-header__nav {
  overflow: visible;
}

.tutorials-select__header {
  font-size: 1.5rem;
  font-weight: 300;
  color: #39b6b3;
}

.tutorials-select__header:after {
  content: '';
  display: block;
  position: absolute;
  top: 11px;
  right: 6px;
  border: 3px solid transparent;
  border-top: 6px solid #39b6b3;
}

.html

<li>
  <div class="tutorials-select">
    <span class="tutorials-select__header">
      {% if category %}
        {{ category.title }}
      {% else %}
        {{ settings.data.texts.all_categories }}
      {% endif %}
    </span>
    <div class="tutorials-select__content">
      <a href="/catalog" class="tutorials-select__content-item {% if template == 'catalog'%} active {% endif %}">{{ settings.data.texts.all_categories }}</a>
      {% for cat in catalog.categories %}
        {% capture url_href %}/categories/{{ cat.slug }}{% endcapture %}
        {% if cat.programs_count > 0 %}
          <a href="{{ url_href }}" class="tutorials-select__content-item {% if cat.slug == category.slug %} active {% endif %}">{{ cat.title | spoiler, 30 }}</a>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</li>

.js

// open select-content
  $('.tutorials-select__header').on('click', function() {
    // hide search rezult
    $('.tutorial-search__rezult').hide();
     $('.tutorials-select__content').hide();
     
    $(this).parents('.tutorials-select').find('.tutorials-select__content').toggle();
    $(this).toggleClass('traingle-down');
    return false;
  });