株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

     横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

galleria

03-07)  1. 横型方向のドロップダウンメニューのナビゲーションのスタイル

 

メニューを横に並べてドロップダウン形式で表示し、マウスオーバーでデザインを変更する

#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>