Элемент 2-х блоков в БЭМ

У меня есть следующий html-код:

<header class="filter">
    <h1 class="filter__title title-default">Каталог</h1>
    <div class="filter__parameter dropdown">
        <button class="filter__toggle dropdown__toggle">По жанрам</button>
        <ul class="filter__values-list dropdown__content">
            <li class="filter__value">Жанр 1</li>
            <li class="filter__value">Жанр 2</li>
            <li class="filter__value">Жанр 3</li>
            <li class="filter__value">Жанр 4</li>
            <li class="filter__value">Жанр 5</li>
            <li class="filter__value">Жанр 6</li>
            <li class="filter__value">Жанр 7</li>
            <li class="filter__value">Жанр 8</li>
            <li class="filter__value">Жанр 9</li>
            <li class="filter__value">Жанр 10</li>
        </ul>
    </div>
    <div class="filter__parameter dropdown">
        <button class="filter__toggle dropdown__toggle">Сначала популярные</button>
        <ul class="filter__values-list dropdown__content">
            <li class="filter__value">Популярные</li>
            <li class="filter__value">Новые</li>
            <li class="filter__value">Законченные</li>
        </ul>
    </div>
</header>

Мне кажется, что он не совсем корректен относительно БЭМ. В том смысле, что элементы внутри dropdown являются как элементами блока filter, так и элемента dropdown, и вроде как это не допустимо. Но мне нужно реализовать как стили dropdown, так и стили filter на этих элементах. Как мне поступить?