ハンバーガーメニューを実装したい

現在ハンバーガーメニューの三本線は表示できるようにこちらのコードでできています。

ruby:/index.scss
1@media screen and (max-width: 1199px) {
2  .hamburger {
3    display: block;
4    position: absolute;
5    right: 10px;
6    top: 30%;
7    width: 50px;
8    height: 26px;
9    cursor: pointer;
10  }
11
12  // sub ul {
13  //   display: none;
14  // }
15
16  .nav-button {
17    display: inline-block;
18    position: relative;
19    width: 30px;
20    height: 26px;
21
22    span {
23      display: inline-block;
24      position: absolute;
25      left: 0;
26      width: 100%;
27      height: 4px;
28      background-color: #fff;
29
30      &:nth-of-type(1) {
31        top: 0;
32      }
33
34      &:nth-of-type(2) {
35        top: 11px;
36      }
37
38      &:nth-of-type(3) {
39        bottom: 0;
40      }
41    }
42  }
43}

しかし、プルダウンメニューのこちららのコードが三本線の中に入ってくれない状況です。

ruby:/index.html.haml
1      %section.hamburger
2        %a.nav-button{:href => "#"}
3          %span
4          %span
5          %span
6        %ul.menu
7          %li 
8            フロントエンド
9            %ul.sub
10              %li
11                = link_to "①HTML", card_category_path(:card_id ,1)
12              %li
13                = link_to "②CSS", card_category_path(:card_id, 2)
14              %li
15                = link_to "③Javascript", card_category_path(:card_id, 3)
16          %li
17            バックエンド
18            %ul.sub
19              %li
20                = link_to "④Java", card_category_path(:card_id, 4)
21              %li
22                = link_to "⑤PHP", card_category_path(:card_id, 5)
23              %li
24                = link_to "⑥Python", card_category_path(:card_id, 6)
25              %li
26                = link_to "⑦Ruby", card_category_path(:card_id, 7)
27          = form_with(url: search_cards_path, local: true, method: :get, class: "search-top") do |f|
28            = f.text_field :keyword, placeholder: "検索", class: "search-top"
29            = f.submit "検索", class: "search-top"

ruby:/index.scss
1    &__nav ul {
2      display: flex;
3      align-items: center;
4      justify-content: space-between;
5      height: 80px;
6      font-size: 20px;
7      display: none; // 縮小した時にハンバーガーメニュの表示
8    }