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

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

galleria

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

　

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

縦型の配列は li要素の回り込み指定(float: none;)の解除を行なう。
文字の色は通常色（color: white;）とマウスオーバー色(color: red;)を指定する。
ドロップダウンメニューも同様の指定を行なう。

ｃｓｓの書き方 /*-------------------------------------------------------
03-08 ナビゲーションのスタイル
-------------------------------------------------------- */
#navi_5x0 {
 width: 690px;
}
#navi_5x0 ul {
 position: relative;
}
#navi_5x0 li {
 float: none; /*　縦型の配置　*/
 border: 3px solid #CCCCCC;
 padding: 10px 0 0 10px;
 width: 150px;
 font-size: 13px;
 list-style-type: none; /*　ドットはいらない　*/
 height: 30px; /*　親ﾒﾆｭｰの高さ　*/
 background: #808000; /*　子ﾒﾆｭｰの背景色：黒色　*/
}
#navi_5x0 li a{
 color: white; /*　白色指定　*/
}
#navi_5x0 li:hover a{
 color: red; /*　ホバー時に赤色指定　*/
}
#navi_5x0 li ul{
 display: none;
 position: absolute; /*　表示が親ﾒﾆｭｰの位置とする　*/
 z-index: 2; /*　表示の優先順番　*/
 padding: 10px 5px 0; /*　文字の上部の空白　*/
 width: 167px; /*　子ﾒﾆｭｰの幅　*/
 left: 150px; /*　子ﾒﾆｭｰの表示をずらす*/
 background: #002162;
}
#navi_5x0 li:hover ul{
 display: block; /*　一括表示指示　*/
 text-indent:1em; /*　文字は開始に空白を１文字　*/
 background: #002162; /*　子ﾒﾆｭｰの背景色：黒色　*/
}
#navi_5x0 li:hover ul li a{
 color: white; /*　通常時に白色指定　*/
}
#navi_5x0 li:hover ul li:hover a{
 color: red; /*　ホバー時に赤色指定　*/
}
HTMLの使用例 <div id="navi_5x0">
<ul>
<li id="menu1"><a href="#">経営</a>
<ul>
<li><a href="#">情報戦略/業務革新</a></li>
<li><a href="#">業界動向</a></li>
<li><a href="#">電子行政</a></li>
<li><a href="#">BCP</a></li>
<li><a href="#">IFRS（国際会計基準）</a></li>
</ul>
</li>
<li id="menu2" class="now"><a href="h#">情報システム</a>
<ul>
<li><a href="#">業務アプリケーション</a></li>
<li><a href="#">開発プロセス</a></li>
<li><a href="#">Windows/Office</a></li>
<li><a href="#">オープンソース/Linux</a></li>
<li><a href="#">ITアーキテクトの視点</a></li>
<li><a href="#">仮想化</a></li>
</ul>
</li>
<li id="menu3"><a href="#">ネットワーク</a>
<ul>
<li><a href="#">モバイル</a></li>
<li><a href="#">放送</a></li>
<li><a href="#">エンジニア倶楽部</a></li>
</ul>
</li>
<li id="menu4"><a href="#">セキュリティ</a>
</li>
<li id="menu5"><a href="#">ソフト開発</a>
<ul>
<li><a href="#">Android Developers' Inn</a></li>
<li><a href="#">i-appli Developers' Inn</a></li>
</ul>
</li>
</ul>
</div>