CSSだけでのドロップダウンメニュー実装【hoverの使い方について】

Question

CSSのみを使ったドロップダウンメニューを実装したいです。

「visibility: visible;」と「hover」を使い、メニューバーにカーソルを置いたときにサブメニューが出てくるのは実装できましたが、そのサブメニューにカーソルを合わせようとすると消えてしまいます。どのような問題点が考えられるでしょうか。

ちなみに、メニューバーのaタグに「padding-bottom」を付けてみても上手くいきませんでした。

該当のソースコード

    <header id="header">
        <div class="container">
            <div class="sitelogo">
                <h1><a href="#">Write</a></h1>
                <p>書くためのテーマ</p>
            </div>
    
            <nav class="gnav">
                <ul>
                    <li class="home"><a href="#">ホーム<span class="fas fa-angle-down"></span></a></li>
                        <ul class="homesub">
                            <li><a href="#">→カスタマイズ</a></li>
                        </ul>
                    <li class="page"><a href="#">ページ<span class="fas fa-angle-down"></span></a></li>
                        <ul class="pagesub">
                            <li><a href="#">アイキャッチ画像無しのページ</a></li>
                            <li><a href="#">ページ（全幅テンプレート）</a></li>
                        </ul>
                    <li><a href="#">タイポグラフィー</a></li>
                    <li><a href="#">お問い合わせ</a></li>
                </ul>
            </nav>
    </header>

header {
    height: 152px;
    width: 100%;
    margin-top: 50px;
}
.container {
    width: 1040px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.sitelogo p {
    font-size: 18px;
    color: #777;
}
.gnav ul{
    display: flex;
}
.gnav li{
    font-size: 16.884px;
    padding: 0 15px;
}
.gnav li a {
    display: block;
    /* padding-bottom: 20px; */
}
.home,
.page {
    position: relative;
}
.homesub,
.pagesub{
    position: absolute;
    visibility: hidden;
    height: 50px;
    width: 200px;
}
.homesub {
    line-height: 50px;
    border: 1px solid #f0f0f0;
    box-shadow: 0.5px 0.5px #f0f0f0;
    background-color: #fff;
}
.home:hover+.homesub{       /* 隣接セレクタで指定するとできる */
    visibility: visible;
}
.page:hover+.pagesub {
    visibility: visible;
}
.pagesub {
    flex-direction: column;     /* 要素を縦並びにする */
    margin-left: 100px;
}
.pagesub li {
    font-size: 16px;
    border: 1px solid #f0f0f0;
    box-shadow: 0.5px 0.5px #f0f0f0;
    background-color: #fff;
}

Comments

[int32_t]

タイトルと見出しの「メニュ―」がかな長音「ー」になってないのがめっちゃ気になります。

Answer 1

まずhomeとhomesub、pageとpagesubは入れ子だと思うんですがいかがでしょうか？

<li class="home"><a href="#">ホーム<span class="fas fa-angle-down"></span></a></li>
 <ul class="homesub">
  <li><a href="#">→カスタマイズ</a></li>
 </ul>

ではなく、以下の入れ子構造

<li class="home"><a href="#">ホーム<span class="fas fa-angle-down"></span></a>
 <ul class="homesub">
  <li><a href="#">→カスタマイズ</a></li>
 </ul>
</li>

この場合、
CSSの

.home:hover+.homesub

は

.home:hover .homesub

これでどうでしょうか。

Comments

[puta]

上手く表示できました。htmlに問題があったのですね。
ありがとうございます。