BEM記法における:hoverの書き方について

Question

BEM記法についてお伺いします。

Block__Element--Modifierはわかったのですが、:hoverとかの行き場がわからない状態です。
書きたいのはドロップダウンメニューで、普通に書くところの以下です。

ul{
  li.parent-item{
    ul.children-item{
      display:none;
    }
    &:hover{
      ul.children-item{
        display:block;
      }
    }
  }
}

これをBEM記法にしたいのですが、直感のまま

.nav{
  &__dropdown{
    &__item{
      &__child-item{
        display:none;
      }
      &:hover{
        &__child-item{
          display:block;
        }
      }
    }
  }
}

と書いたところ、

/* line 4, /vagrant/vamazon/app/assets/stylesheets/nav.scss */
.nav__dropdown__item__child-item {
  display: none;
}
/* line 8, /vagrant/vamazon/app/assets/stylesheets/nav.scss */
.nav__dropdown__item:hover__child-item {
  display: block;
}

こうなりました。
理屈はわかりますが、じゃあどう修正すれば目的の挙動を達成できるか？　がわかりません。
あるいはJavaScriptで --hover を付与するのが正道なのでしょうか？

ご教示お願いします。

Answer 1

.nav{
  &__dropdown{
    &__item{
      $selector: #{&};
      &__child-item{
        display:none;
      }
      &:hover{
        #{$selector}__child-item{
          display:block;
        }
      }
    }
  }
}

Comments

[perpouh]

動きましたーー！！ありがとうございます！！