こんにちは。
ぴころじーの竹川です。

本日、メニューを作っていて、どうもおかしな現象が発生しています。いくら調べても解決策が見当たらず、未だに解決していない案件です。誰か分かる方がいれば！？こっそり教えてください（ぇ

こうなって欲しい（理想）

左側に隠れているメニューブロックに対して、ホバーしたらひょっこり表示されるというものです。よくあるメニューだと思います。

具体的にはこのような感じです。（うちのサンプルサイトで申し訳ありません。）

通常時のメニュー（引っ込んでます）

ホバーしたときのメニュー（表示されています）

動きとしてはこうなって欲しいところです。といいますか、動きは問題ないのです。問題なのは、表示の方・・・！

必要な仕様

動きや表示など、必要な仕様は決めています。

• 非表示のとき、メニューがあると分かるように、少しだけ表示する。
• メニュータブを付ける。
• リストが多くなり、Y方向にはみ出てもスクロールする。
• ホバーしたら左からフェイドインする。

解決すべき問題（現実）

仕様の2番目と3番目がどうもうまく行かないという現象に見舞われました。

cssでコンテナ要素にoverflow-y:scrollを付けます。（3番目）

同様に、cssでコンテナ要素の疑似要素としてメニュータブを付けます。（2番目）

この2つが相反してしまうのです。3番目を適用すれば、2番目が反映されなくなり、2番目を適用すれば、3番目が反映されなくなるのです。

なお、前者のほうが可能性があると考えており、スクロールを有効にした場合、疑似ブロック自体は正常に配置されていると思われます。ただ、表示されていません。

overflow-y:scrollのscroll以外で、clip、initial、revert、unset、visibleの場合はタブが表示されます。

また、block:absoluteのabsolute以外の場合は、表示場所がおかしくなりますが、タブが表示されます。

該当のcss（sassですが・・・。）はこんな感じです。問題の箇所を太線にしました。

#block-sitetree-menu {
  display: block;
  position: fixed;
  top: 0;
  width: 405px;
  height: 100vh;
  padding: 0;
  left: -400px;
  background-color: #000;
  transition: all 0.6s;
  z-index: 3;
  overflow-y: scroll;
  -ms-overflow-style: none; // IE/Edgeでスクロールバーを非表示
  scrollbar-width: none; // Firefox
  &::-webkit-scrollbar { // Chrome/Safari
    display: none;
  }
  &:hover {
    left: 0;
  }
  &::before {
    content: 'メニュー';
    position: absolute;
    display: block;
    color: #fff;
    top: 50px;
    left: 380px;
    z-index: 4;
    width: max-content;
    background-color: #000;
    transform: rotate(90deg);
    padding: 10px;
    border-radius: 5px 5px 0 0;
    font-size: 16px;
  }
  ul.sitetree-menu {
    flex-direction: column;
    li.menu-item--expanded { // 下位に展開できるメニューがあるとき
      >a {
        pointer-events: none; // 直下のaタグを無効にする
      }
    }
  }
}

う～ん。難しいです！解決したら続報するかもしれません。