こんにちは、ハクです。
昨晩よりヘッダ下をこのようにドロップダウンをしましたがいかがでしょうか。
「作る」「好む」の子階層でなぜか外れていますがまだ意味がわかりません。
以下は、一応のコードです。ただのテクストで申し訳ありません。どうぞご覧くださいませ。
■デザイン>カスタマイズ>ヘッダ>ブログタイトル下
<ul class="gnav">
<li><a href="https://～～～"><i class="blogicon-home"></i>HOME</a></li>
<li><a href=""><i class="blogicon-hatenablog"></i>書く</a>
<ul>
<li><a href="https://～～～">雑記</a></li>
<li><a href="https://～～～">特化</a></li>
</ul>
</li>
<li><a href=""><i class="blogicon-laptop"></i>読む</a>
<ul>
<li><a href="https://～～～">書籍</a></li>
<li><a href="https://～～～">通信</a></li>
</ul>
</li>
<li><a href=""><i class="blogicon-cog"></i>作る</a>
<ul>
<li><a href="https://～～～">家計簿</a></li>
<li><a href="https://～～～">ブログ</a></li>
<li><a href="https://～～～">アフィリエイト</a></li>
<li><a href="https://～～～">社会保障</a></li>
<li><a href="https://～～～">FX</a></li>
</ul>
</li>
<li><a href=""><i class="blogicon-heart"></i>好む</a>
<ul>
<li><a href="https://～～～">音楽</a></li>
<li><a href="https://～～～">鑑賞</a></li>
<li><a href="https://～～～">食事</a></li>
<li><a href="https://～～～">健康</a></li>
<li><a href="https://～～～">云々</a></li>
</ul>
</li>
</ul>
■デザイン>カスタマイズ>ヘッダ>デザインCSS
/*ヘッダー下*/
.gnav {
display: flex;
height: 2rem;
margin: 0 auto;
width: 1000px;
}
.gnav > li {/*親階層のみ幅を25%にする*/
width: 25%;
}
/*全てのリスト・リンク共通*/
.gnav li {
list-style: none;
position: relative;
}
.gnav li a {
background: #001b34;
border-right: 1px solid #eee;
color: #fff;
display: block;
height: 2rem;
line-height:2rem;
text-align: center;
text-decoration: none;
width: 100%;
}
/*子階層以降共通*/
.gnav li li {
height: 0;
overflow: hidden;
transition: .5s;
}
.gnav li li a {
border-top: 1px solid #eee;
}
.gnav li:hover > ul > li {
height: 2rem;
overflow: visible;
}
/*aの背景色を指定*/
.gnav li:hover a {/*親階層*/
background: #00305c;
}
.gnav li li a {/*子階層*/
background: #00305c;
}
.gnav li li:hover a {
background: #004789;
}
(´・ω・｀)
疲れました。
参考されたブログ(サイト)はこちらです。
↓ ↓ ↓
・WEBDESIGN「【CSS】CSSだけで作るドロップダウンメニュー（多階層）」
・フジブロッ！「はてなブログで使えるアイコンフォント全125種」
(´・ω・｀)
