横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
背景の画像データの上に、プルダウンメニューの文字列を追加して装飾する。
プルダウウンメニューの指定は 【cssの基本】のメニュー項目
cssの書き方 |
/*------------------------------------------------------- 04-07 ナビゲーションの文字スタイル -------------------------------------------------------- */ #navi0407{ clear: both; width: 690px; height: 240px; margin: 0 0 5px 0; padding: 0 0 6px 0; background-repeat: repeat-x; background-position: left bottom; background-image: url("../images/head-005.jpg"); border-top: 1px solid #CCCCCC; } #navi0407 li{ float: left; width: 170px; padding: 0; border-right: 1px solid #CCCCCC; text-align: center; list-style-type: none; font-size: small; } #navi0407 li.mainNavi01{ border-left: 1px solid #CCCCCC; } #navi0407 li.active{ padding: 5px 0; color: #B6461D; } #navi0407 li a{ display: block; padding: 5px 0; color: #000080; font-size: 14px; font-weight:bold; } #navi0407 li ul.childNavi03{ display: none; } #navi0407 li.mainNavi03{ position: relative; } #navi0407 li.mainNavi03:hover ul.childNavi03{ display: block; position: absolute; z-index: 50; background: none; left: 30px; width: 100px; height: auto; background: #002162 no-repeat; border-top: 1px solid #CCCCCC; border-left: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; } #navi0407 li.mainNavi03 ul.childNavi03 li{ float: none; width: 120px; font-size: small; background-color: #FFFFFF; border-bottom: 1px solid #CCCCCC; } |
---|---|
HTMLの使用例 |
<div id="navi0407"> <ul> <li class="mainNavi01"><a href="../galleria1/index.html">ホーム</a></li> <li class="mainNavi02"><a href="index.html">css勉強室メニュー</a></li> <li class="mainNavi03"><a href="index.html">cssの基本</a> <ul class="childNavi03"> <li><a href="index.html">XHTMLとHTML</a></li> <li><a href="gari01-02.html">cssの配置</a></li> <li><a href="gari01-03.html">セレクター</a></li> <li><a href="gari01-04.html">センタリング</a></li> </ul> </li> <li class="mainNavi04"><a href="gari03-01.html">リンクの拡張</a></li> </ul> </div> |