【CSS】ホバーで表示されるグローバルナビゲーションの実装

こんにちは、元調剤薬局の薬剤師、今は福井県福井市でホームページ制作をやっている@ジョウです。

今回の記事は、グローバルナビゲーションでマウスをホバーするとメニューが表示される実装方法をまとめました。

備忘録としてまとめたので参考にしてください。

 <div class="navi-wrap">
        <nav class="hed_nav1">
            <div class="hed_nav1_btn"><a href=""><span>PHILOSOPHY</span>/経営方針</a>
                <ul>
                    <li><a href="">患者様へ</a></li>
                    <li><a href="">経営方針</a></li>
                </ul>
            </div>
            <div class="hed_nav1_btn"><a class="hover" href=""><span>ABOUT
                </span>/会社概要</a>
                <ul>
                    <li><a href="">代表メッセージ</a></li>
                    <li><a href="">薬局の取り組み</a></li>
                    <li><a href="">企業情報</a></li>
                </ul>
            </div>
            <div class="hed_nav1_btn"><a class="hover" href=""><span>RECRUIT</span>/採用情報</a>
                <ul>
                    <li><a href="">採用理念</a></li>
                    <li><a href="">社員紹介</a></li>
                    <li><a href="">採用の流れ</a></li>
                    <li><a href="">インターンシップ</a></li>
                    <li><a href="">募集要項</a></li>
                </ul>
            </div>
            <div class="hed_nav1_btn"><a href=""><span>Shop</span>/店舗情報</a>
                <ul>
                    <li><a href="">すこやか店</a></li>
                    <li><a href="">にこにこ店</a></li>
                    <li><a href="">けんこう店</a></li>
                    <li><a href="">あおぞら店</a></li>
                </ul>
            </div>
        </nav>

    </div>

<div class="hed_nav1_btn"><a href=""><span>PHILOSOPHY</span>/経営方針</a>

<ul>

</ul>

</div>

<div class="hed_nav1_btn"><a class="hover" href=""><span>ABOUT

</span>/会社概要</a>

<ul>

<li><a href="">代表メッセージ</a></li>

<li><a href="">薬局の取り組み</a></li>

</ul>

</div>

<div class="hed_nav1_btn"><a class="hover" href=""><span>RECRUIT</span>/採用情報</a>

<ul>

<li><a href="">採用の流れ</a></li>

<li><a href="">インターンシップ</a></li>

</ul>

</div>

<ul>

<li><a href="">すこやか店</a></li>

<li><a href="">にこにこ店</a></li>

<li><a href="">けんこう店</a></li>

<li><a href="">あおぞら店</a></li>

</ul>

</div>

</nav>

</div>

メニューは４つあり、それぞれをホバーすると下層メニューが表示されるようにします。

@charset "utf-8";
a{
    text-decoration:none;
    color:white;
font-weight:bold;
}

ul{
    list-style:none;
    margin:0;
    padding:0;

}
.navi-wrap{
    position:fixed;
    top:0;
    left:0;
    right:0;
}
.hed_nav1{
  display:flex;
}

.hed_nav1_btn{
    width:25%;
    height:50px;
    background:#0abde3;
    line-height:50px;
    text-align: center;
    
}

.hed_nav1_btn ul{
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.6s ease;
    background:#0abde3;
}

.hed_nav1_btn:hover ul{
    visibility: visible;
    opacity: 1;
}