ドロップダウンメニューの作り方

前提・実現したいこと

ドロップダウンメニュー（プルダウンメニュー）をCSSで作成したい。
最初の1列のメニューを隠して
カテゴリーにhoverさせた際に「表示」をさせたい。

現状までの流れ

現在、ancestryを使用して多層階のカテゴリーを作成いたしました。
それを表示させるため、ドロップダウンメニューを使い作成中です。
最下部の記事を参考にcssだけで作成をしておりました。
子階層、孫階層に関してはhoverすると横にメニューがしっかり現れます。
しかし親階層（カテゴリーの下のメニュー）に関しては消すことはできても
hoverした際にドロップダウンで表示することができません。

発生している問題・写真

左から順番にカテゴリーにhoverさせた状態

デフォルト（何もhoverさせてない状態）

１枚目のように真ん中と右のメニューはhoverで表示されます。
しかし、hoverをはずして２枚目の状態で左の列は消えていません。
（消すことはできるのですが表示させることができなくなります）

該当のソースコード

html
1.header__left
2        %ul.categories
3          = link_to "#", class: "category__search" do
4            カテゴリー
5          %li.categoryMenu
6            %ul.firstMenu__parents
7              - @parents.each do |parent|  
8                %li.firstMenu__parents__parent
9                  = link_to "#", class: "item-link" do
10                    = parent.name
11                  %ul.secondMenu__children
12                    - parent.children.each do |child|
13                      %li.secondMenu__children__child
14                        = link_to "#", class: "item-link" do
15                          = child.name
16                        %ul.thirdMenu__grandchildren
17                          - child.children.each do |grandchild|
18                            %li.thirdMenu__grandchildren__grandchild
19                              = link_to "#", class: "item-link" do
20                                = grandchild.name

css
1.categories {
2  height: 2rem;
3  width: 250px;
4  position: relative;
5}
6.category__search{
7  text-decoration: none;
8  color: black;
9  padding-left: 5px;
10  &:hover {
11  color: #3CCACE;
12  }
13}
14.categoryMenu li a {
15  padding-left: 5px;
16  color: black;
17  display: block;
18  height: 2rem;
19  text-decoration: none;
20  background-color: #fff;
21  font-size: 12px;
22  &:hover {
23    color: #3CCACE;
24  }
25}
26// ①親階層
27.firstMenu__parents {
28  position: absolute;
29  width: 250px;
30  margin-top: 15px;
31}
32// ②親子階層のポジション
33.secondMenu__children,
34.thirdMenu__grandchildren {
35  position: absolute;
36  top: 0;
37  left: 250px;
38  width: 250px;
39}
40
41// 親はこれで隠れる。しかし表示ができない。
42// .categoryMenu ul li {
43//   height: 0;
44//   overflow: hidden;
45//   transform: 1.0s;
46// }
47
48// 子孫はこれで隠れる
49.categories ul li li {
50  height: 0;
51  overflow: hidden;
52  // transform: 1.0s;
53}
54// 隠れたコンテンツの表示
55.firstMenu__parents__parent:hover > ul > li {
56  height: 2rem;
57  overflow: visible;
58}
59.secondMenu__children__child:hover > ul > li {
60  height: 2rem;
61  overflow: visible;
62}