メニューバーの改造　その２

CSS

2020.03.082019.11.08

こんにちは、朱夏です。

メニューバー作成の続き、やっていきたいと思います。
前回作った状態がこちら。

今回は、リンクにマウスを合わせるとサブメニューが表示されるようにしていきます。
まずはhtmlでサブメニューの部分を書いてみます。
Link1の下にサブメニューを追加していきます。

<ul>

<li>

<div>

<ul>

<li><a href=””>aaaaa</a></li>

<li><a href=””>bbbbb</a></li>

<li><a href=””>ccccc</a></li>

<li><a href=””>ddddd</a></li>

</ul>

</div>

</li>

</ul>

</div>

これを表示してみると・・・

まぁ、そうなりますよね（汗
CSSで通常はサブメニューが表示されないようにしていきます。。

.menu > ul > li > div {

background-color: #dedede;

border-top: 0;

border-radius: 0 0 4px 4px;

display: none;

margin: 0;

opacity: 0;

position: absolute;

width: 165px;

visibility: hidden;

}

結果がこんな感じ。

サブメニューの表示が消えましたが、今度はマウスを合わせても出てこなくなりました・・・。
今度はマウスポインタがLink1に乗った時だけサブメニューが表示されるように・・・

.menu > ul > li:hover > div {

display: block;

opacity: 1;

visibility: visible;

結果がこちらです。

あれ・・・？
なんかおかしい・・・・・？？

.menu6 > ul > li > div ul > li {
display: block;
}

これでどうだろう？

どうにか上手くいったみたいです。
今回はここまで。

それではまた次回、よろしくお願いします。