横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
メニューを横に並べてドロップダウン形式で表示し、マウスオーバーでデザインを変更する
#navi_521要素でメニュー全体の幅(width: 690px;)を指定、
個々の幅は li要素の幅(width: 150px;)
li a要素で文字列の色(color:white;)を指定、
マウスオーバーになると li:hover a 要素で文字列の色(color: red;)を変更する。
ドロップダウンメニューはli.sub03:hover要素で表示(display: block;)する。
cssの書き方 |
/*------------------------------------------------------- 03-07 ナビゲーションのスタイル ドロップダウンメニュー -------------------------------------------------------- */ #navi_521{ clear: both; width: 690px; } #navi_521 li{ float: left; width: 150px; text-align: center; list-style-type: none; font-size: medium; background-image: url("../images/bg_list.gif"); background-repeat: repeat-x; border: 3px solid #CCCCCC; } #navi_521 li.active{ color: white; } #navi_521 li a{ display: block; padding: 5px 0; color:white; } #navi_521 li:hover a{ color: red; } /* ドロップダウン 親メニュー 指定 */ #navi_521 li ul.childNavi03{ display: none; } #navi_521 li.sub03{ position: relative; /*サブメニュー表示位置*/ } #navi_521 li.sub03 a{ color: white; } /* ドロップダウン 子メニュー 指定 */ #navi_521 li.sub03:hover ul.childNavi03{ display: block; } #navi_521 li.sub03 ul.childNavi03 li{ float: none; width: 145px; /* 小メニューサイズ */ font-size: small; } #navi_521 li.sub03 ul.childNavi03 li:hover a{ color: red; } |
---|---|
HTMLの使用例 |
<div id="navi_521"> <ul> <li><a href="../index.html">ホーム</a></li> <li><a href="#">INEXとは?</a></li> <li class="sub03"><a href="#">事業紹介</a> <ul class="childNavi03"> <li><a href="#">カフェ事業 2-1</a></li> <li><a href="#">街づくり事業 2-2</a></li> <li><a href="#">イベント事業 2-3</a></li> <li><a href="#">Web制作事業 2-4</a></li> </ul> </li> <li><a href="#">採用情報</a></li> </ul> </div> |