ドロップダウンメニューがクリックしようとすると勝手に閉じてしまいます

前提・実現したいこと

ドロップダウンメガメニューを実装したのですがマウスオーバーで開いた子メニューをクリックしようとすると閉じてしまいます。
紹介していた方のデモでは問題なくクリックできていたので原因がわからず困っております。

該当のソースコード

html
1<nav id="gnav">
2        <ul>
3          <li><a href="">HOME</a></li>
4          <li class="toggle">
5            <a href="">ABOUT</a>
6            <div class="menu">
7              <ul class="menu_inner">
8                <li><a href="#">ABOUT SUB 01</a></li>
9                <li><a href="">ABOUT SUB 02</a></li>
10                <li><a href="">ABOUT SUB 03</a></li>
11              </ul>
12              <ul class="menu_inner">
13                <li><a href="">ABOUT SUB 04</a></li>
14                <li><a href="">ABOUT SUB 05</a></li>
15                <li><a href="">ABOUT SUB 06</a></li>
16              </ul>
17            </div>
18          </li>
19          <li><a href="">NEWS</a></li>
20          <li class="toggle">
21            <a href="">COMPANY</a>
22            <div class="menu">
23              <ul class="menu_inner">
24                <li><a href="">COMPANY SUB 01</a></li>
25                <li><a href="">COMPANY SUB 02</a></li>
26                <li><a href="">COMPANY SUB 03</a></li>
27              </ul>
28            </div>
29          </li>
30        </ul>
31      </nav>

scss
1a {
2    text-decoration: none;
3    color: #333;
4  }
5
6#gnav > ul {
7display: table;
8padding-left: 50px;
9
10> li {
11    display: table-cell;
12    margin-right: 2em;
13
14    &:hover {
15    color: #fff;
16    background-color: #19192b;
17
18    > a {
19        color: #fff;
20    }
21
22    .menu {
23        max-height: 9999px;
24        opacity: 1;
25    }
26    }
27
28    > a {
29    display: block;
30    padding: 25.5px 1em 15.5px;
31    transition: all .2s ease-in;
32    }
33}
34
35.menu {
36    transition: all .2s ease-in;
37    max-height: 0;
38    opacity: 0;
39    overflow: hidden;
40    width: 100%;
41    left: 0;
42    text-align: center;
43    position: absolute;
44    background-color: #19192b;
45
46    .menu_inner {
47    padding: 1em 0;
48
49    li {
50        display: inline-block;
51        margin: 0 .5em;
52    }
53    }
54
55    a {
56    color: #fff;
57    }
58}
59}