ドロップダウンメニューの作成

-Ruby on Railsのバージョン:7.2.1
-Rubyのバージョン:3.3.5

ポートフォリオ作成をするにあたって、サイトをいろいろと見てみた。その中で入れた方がいい技術を実装してみようということでドロップダウンメニューを実装してみました。

コードを下記に記載します。

<div class="gnavi_wrap">
    <ul class="gnavi_lists">
      <li class="gnavi_list" >
        <%= link_to "メニュー","#" %>
        <ul class="gnavi_list_menu">
          <li><%= link_to "ゲーム","#" %></li>
          <li><%= link_to "ランキング","#" %></li>
          <li><%= link_to "設定","#" %></li>
        </ul>
      </li>
    </ul>
</div>

.gnavi_wrap {
  width: 1200px;
  margin: 0 auto; 
}

.gnavi_lists {
  list-style: none;
  padding: 0;
  display: flex;
}
.gnavi_list {
  position: relative;
  margin-right: 10px;
}

.gnavi_list a {
  text-decoration: none;
  color: #333;
  display: block;
  padding: 5px 10px;
}

.gnavi_list a:hover {
  background-color: #6b5a5a;
}

.gnavi_list_menu {
  display: none; /* 初期状態は非表示 */
  position: absolute;
  top: 100%; /* 親要素の下に表示 */
  left: 0;
  border: 1px solid #ccc;
  list-style: none;
  padding: 0;
  width: 150px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.gnavi_list_menu li a {
  padding: 5px 10px;
  color: #333;
  display: block;
}

.gnavi_list_menu li a:hover {
  background-color: #f0f0f0;
}

.gnavi_list:hover .gnavi_list_menu {
  display: block;
}

下記のメニューのところにマウスをホバーすると

ゲーム、ランキング、設定と詳細な内容がドロップダウンメニューとして出てくるように実装した。

躓いた部分

<li class="gnavi_list" >
        <%= link_to "メニュー","#" %>
        ~
        ~

上記liタグをそのまま

<li class="gnavi_list" ><%= link_to "メニュー","#" %></li>

とそのまま閉じていたことによってうまくcssが適用されておらず、ドロップダウンメニューが出てこなかった。

ポイント（私が勝手に思ってるポイント）

.gnavi_list_menu {
  display: none; /* 初期状態は非表示 */

ここのgnavi_list_menu（ゲーム、ランキング、設定のリンク）が初期状態で非表示に設定してあげて、

.gnavi_list:hover .gnavi_list_menu {
  display: block;
}

gnavi_list:hoverでgnavi_list（メニューのリンク）にマウスポインタをホバーした時に
.gnavi_list_menu（ゲーム、ランキング、設定のリンク）をdisplay: block;によって表示する。
また、blockの特性上、縦方向に積み重なるように表示されるので、今回メニューの下にそのまま自然と表示されたのでよかった。

以上になります。
Railsのポートフォリオのためにやってますが、HTMLとcssばっかりしてんな笑
ご指摘などありましたらお願いします。