visibility: hidden;で隠した要素を、hoverした時に表示させたい

visibility: hidden;で隠した要素をhoverした時に表示させたいです。

コーディング的には合っていると思うのですが、なぜかhoverが上手く効きません。
どのような問題点が考えられるでしょうか。

該当のソースコード

html
1    <header id="header">
2        <div class="container">
3            <div class="sitelogo">
4                <h1><a href="#">Write</a></h1>
5                <p>書くためのテーマ</p>
6            </div>
7    
8            <nav class="gnav">
9                <ul>
10                    <li class="home"><a href="#">ホーム<span class="fas fa-angle-down"></span></a></li>
11                        <ul class="homesub">
12                            <li><a href="#">→カスタマイズ</a></li>
13                        </ul>
14                    <li class="page"><a href="#">ページ<span class="fas fa-angle-down"></span></a></li>
15                        <ul class="pagesub">
16                            <li><a href="#">アイキャッチ画像無しのページ</a></li>
17                            <li><a href="#">ページ（全幅テンプレート）</a></li>
18                        </ul>
19                    <li><a href="#">タイポグラフィー</a></li>
20                    <li><a href="#">お問い合わせ</a></li>
21                </ul>
22            </nav>
23    </header>

css
1
2
3ul {
4    list-style: none;
5    margin-top: 40px;
6}
7header {
8    height: 152px;
9    width: 100%;
10    margin-top: 50px;
11}
12.container {
13    width: 1040px;
14    margin: 0 auto;
15    display: flex;
16    justify-content: space-between;
17}
18.sitelogo p {
19    font-size: 18px;
20    color: #777;
21}
22.gnav ul{
23    display: flex;
24}
25.gnav li{
26    font-size: 16.884px;
27    padding: 0 15px;
28}
29.gnav li a {
30    display: block;
31}
32.home,
33.page {
34    position: relative;
35}
36.homesub,
37.pagesub{
38    position: absolute;
39    visibility: hidden;
40    height: 50px;
41    width: 200px;
42}
43.homesub {
44    line-height: 50px;
45    border: 1px solid #f0f0f0;
46    box-shadow: 0.5px 0.5px #f0f0f0;
47    background-color: #fff;
48}
49.home:hover .homesub{
50    visibility: visible;
51}
52.page:hover .pagesub {
53    visibility: visible;
54}
55.pagesub {
56    flex-direction: column;     /* 要素を縦並びにする */
57    margin-left: 100px;
58}
59.pagesub li {
60    font-size: 16px;
61    border: 1px solid #f0f0f0;
62    box-shadow: 0.5px 0.5px #f0f0f0;
63    background-color: #fff;
64}
65.fas {
66    margin-left: 10px;
67}