こんにちは、朱夏です。
メニューバー作成の続き、やっていきたいと思います。
前回作った状態がこちら。
今回は、リンクにマウスを合わせるとサブメニューが表示されるようにしていきます。
まずはhtmlでサブメニューの部分を書いてみます。
Link1の下にサブメニューを追加していきます。
<div class=”menu”>
<ul>
<li>
<a href=”リンク先パスを入力”>link1 <span class=”downmenu”></span></a>
<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>
<li><a href=”リンク先パスを入力”>link2</a></li>
<li><a href=”リンク先パスを入力”>link3</a></li>
<li><a href=”リンク先パスを入力”>link4</a></li>
<li><a href=”リンク先パスを入力”>link5</a></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;
}
display: block;
}
これでどうだろう？
どうにか上手くいったみたいです。
今回はここまで。
それではまた次回、よろしくお願いします。
