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

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

galleria

03-13)　 1. サイトの配置図

　

マウスオーバーでテキストの位置を動かす

サイトの配置図を作成する。
マウスオーバー時に li a:hover要素を使って、文字列を上に移動(bottom: 3px;)する

ｃｓｓの書き方 /*-------------------------------------------------------
03-13 マウスオーバーでテキストの位置を動かす
-------------------------------------------------------- */
.site_471{
 float:left;
 margin: 0 0 0 10px;
 width: 600px;
}
.site_471 li{
 margin: 0 0 15px 0;
 list-style-type: none;
 font-size: small;
}
.site_471 li ul{
 padding: 15px 0 0 10px;
 background-image: url("../images/inc_sitemap_lineV.gif");
 background-repeat: no-repeat;
 background-position: left bottom;
}
.site_471 li ul li{
 margin: 0 0 15px 0;
 padding: 0 0 0 25px;
 font-size: small;
 background-image: url("../images/inc_sitemap_lineH.gif");
 background-repeat: no-repeat;
 background-position: 0 11px;
}
.site_471 li ul li.last{
 background-image: none;
}

.site_471 li a:hover{
 position: relative;
 bottom: 3px;
}
HTMLの使用例 <ul class="site_471">
<li><a href="#">Home</a>
<ul>
<li><a href="#">INEXとは？</a>
<ul>
<li><a href="#">会社概要</a></li>
<li><a href="#">社長メッセージ</a></li>
<li class="last"><a href="#">アクセスマップ</a></li>
</ul>
</li>
<li><a href="#">事業紹介</a>
<ul>
<li><a href="#">カフェ事業</a></li>
<li><a href="#">街づくり事業</a></li>
<li><a href="#">イベント事業</a></li>
<li class="last"><a href="#">Web制作事業</a></li>
</ul>
</li>
<li><a href="#">プレスルーム</a>
<ul>
<li><a href="#">2010年</a></li>
<li class="last"><a href="#">2009年</a></li>
</ul>
</li>
<li><a href="#">採用情報</a>
<ul>
<li><a href="#">中途採用</a></li>
<li><a href="#">新卒採用</a></li>
<li class="last"><a href="#">アルバイト採用</a></li>
</ul>
</li>
<li><a href="#">個人情報保護方針</a></li>
<li><a href="#">お問い合わせ</a></li>
<li class="last"><a href="#">サイトマップ</a></li>
</ul>
</li>
</ul>