Javascriptでツリーメニュー（Aタグ使用） 画像を右揃えにするには？
- JavascriptのツリーメニューでAタグを使用して画像を右揃えにする方法を教えてください。
- 質問者はJavascriptのツリーメニューを作成中で、Aタグ内の画像を右揃えにしたいと困っています。
- 質問者は試しましたが上手くいかず、どなたか方法を教えていただけないかと求めています。
- ベストアンサー
Javascriptでツリーメニュー（Aタグ使用） 画像を右揃えにするには？
Aタグを使ってJavascriptのツリーメニューを作っているのですが、右揃えにならず、困っています。 下記ソース内で、テキスト「1.ツリーメニュー」は左揃えで、画像（main_a.gif）は右揃えにしたいのです。DIVやSPANで試しましたが、私の力不足でうまくいきません。 どなたか教えていただけませんか？ <HEAD> <STYLE> .no_border { vertical-align: middle; text-align: right; border-style:none; } A.main { display: block; width: 100%; color: #000000; background-color: #0000FF; margin: 3px; padding: 6px 6px 6px 1px; font-size: 14px; line-height: 14px; text-align: left; text-decoration: none; padding-left: 5px; } A.main:hover { color: #000000; background-color: #FF0000; margin: 3px; padding: 6px 6px 6px 1px; padding-left: 5px; } A.main:active { color: #333333; } A.main:visited { color: #333333; } A.main:focus { color: #333333; } A.sub_chan { display: block; width: 100%; color: #000000; background-color: #0000FF; margin: 3px; padding: 3px 3px 3px 3px; padding-left: 10px; font-size: 12px; line-height: 12px; text-align: left; text-decoration: none; } A.sub_chan:hover { color: #333333; background-color: #FF0000; margin: 3px; padding: 3px 3px 3px 3px; padding-left: 10px; } A.sub_chan:active { color: #333333; } A.sub_chan:visited { color: #333333; } </STYLE> <SCRIPT language="JavaScript"> flag = false; function treemain(tName) { tmain = document.all[tName].style; if(tmain.display == 'none') tmain.display = "block"; else tmain.display = "none"; </SCRIPT> </HEAD> <BODY> <A href="javaScript:treemain('treemain1')" class="main">1.ツリーメニュー<img src="../img/main_a.gif" class="no_border" alt="メニューA" width="20" height="20"></A> <DIV id="treemain1" style="display:none"> <A href="http://yahoo.co.jp" class="sub_chan">⇒1-1.</A> </DIV> </BODY>
- kumicomxxx
- お礼率100% (1/1)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
イメージを右揃えにするならfloat:rightして、文書より先に書いてください。 あと、document.all系はブラウザ依存が激しいのでやめた方がよいです。 表示/非表示の切り替えもclassを変更してやる方がなにかと便利です。 ってことで、こんな感じでどうでしょう？ <head> <style> a.menu { display: block; width: 100%; height:1.2em; color: #000000; background-Color: #0000FF; margin: 3px; padding: 6px 6px 6px 1px; font-size: 14px; line-height: 1.2em; text-align: left; text-decoration: none; padding-left: 5px; } a.menu:hover{ background-Color: #FF0000; } img.menu{ display:block; float:right; border:0px; width:20px; height:20px; } .block{ display:block; } .none{ display:none; } </style> <script language="JavaScript"> function treemain(tName) { var tmain = document.getElementById(tName); tmain.className =( tmain.className=="" || tmain.className=="none")?"block":"none"; } </script> </head> <body> <a href="javaScript:treemain('treemain1')" class="menu"><img src="../img/main_a.gif" alt="メニューA" class="menu" />1.ツリーメニュー</a> <div id="treemain1" class="none"> <a href="http://yahoo.co.jp" class="sub_chan">⇒1-1.</a> </div> </body>
関連するQ&A
- cssのみ使用したプルダウンメニュー
はじめまして。 cssのみを使ってプルダウンするメニューを作ろうとしているのですが、上手くいきません。 コードとcssは以下です。 aboutにロールオーバーすると子孫リストがプルダウンする、というようにしたいです。 .main li .sub{ visibility:hidden; } で子孫リストは消えるものの、 .main li : hover .sub{ visibility:visible; } と設定しても現れてくれません。 どうすれば上手くいくでしょうか。 すみませんがよろしくお願いします。 ・html <nav class="common_width"> <ul class="main"> <li><a href="#">profile</a></li> <li><a href="#">about</a> <ul class="sub"> <li><a href="#">profile</a></li> <li><a href="#">blog</a></li> <li><a href="#">itai</a></li> </ul> </li> <li><a href="#">test</a></li> </ul> </nav> ・css li{ list-style:none; } .common_width{ width:900px; margin:0 auto; } a { color: #000; text-decoration: none; transition: background 0.3s ease 0s, color 0.3s ease 0s; } /*全部のリスト*/ nav li{ width:150px; } /*直下のul*/ nav > ul{ width:650px; margin:0 auto; overflow:hidden; } /*直下のリスト*/ nav .main li{ float:left; color: #9f9f9f; position: relative; margin-left:100px; } nav .main li:first-child{ border-left:none; margin-left:0px; } nav ul>li a{ padding:10px 0 10px 0 ; background-color: #ccc; display: block; text-align: center; line-height:1; } nav li:hover > a{ color: #fff; background-color: #000; } .main li .sub{ visibility:hidden; } .main li : hover .sub{ visibility:visible; } nav ul li a:hover{ color: #fff; display:block; background-color: #000; } nav .sub li { font-size: 12px; color:#fff; border-top:1px dotted #fff; text-align:center; margin-left:0px; }
- ベストアンサー
- HTML
- 画像を使ったドロップダウンメニュー
ホームページのメニューボタンにドロップダウンを使おうと思っています。 色々ネットから調べて自分で試したのですが、 オンマウスで画像を変えたりと、少し複雑な為、うまく表示できません。 文字数の関係上スタイルシートのコードだけしか貼れませんが、 よろしくお願いいたします。 /* ナビゲーション */ #navi_continer { position: relative; z-index:100; width: 400px; height:110px; } #navi { position: absolute; width: 100px; background-image: url(./img/menu/03a.jpg); height: 110px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { color: #fffff; float: left; width: 100px; margin: 0; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 3px 0; text-align: center; font-weight: bold; text-decoration: none; background-image: none; } #navi li a:hover { color: #ffffff; background-image: url(./img/menu/03b.jpg); height: 110px; width: 100px; } /* サブメニュー */ #navi ul.sub { background: #eeeeee; } #navi ul.sub li { float: none; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding: 3px 0; border-top:1px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #navi li.navi_menu_on{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }button { background-image: url(%E3%83%94%E3%82%AF%E3%83%81%E3%83%A3%201.jpg); }
- 締切済み
- Java
- スタイルシートの横並びリスト中央配置について
#Area_Navi { margin: 0; padding: 0; } #Area_Navi ul { margin-left: auto; margin-right: auto; text-align: center; list-style-type: none; list-style-position:inside; } #Area_Navi li { text-align: center; display: inline; padding: 0; margin-left: auto; margin-right: auto; float: left; width: 200px; } #Area_Navi a { display: block; border-left: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; background-color: #FFFFFF; font-size: 20pt; padding: 3px; text-decoration: none; color: #000000; margin: 1px 0px; text-align: center; } スタイルシートは上記なのですが、うまく中央配置されず 半端に左寄せになっています。 windows7 firefox を使用しています。 調べて position:relative; と記載しても上手く中央寄せになりませんでした。 どなたか、教えて頂けませんか。 宜しくお願い致します。
- ベストアンサー
- CSS
- xml宣言をするとIE6で右サイドがカラム落ちしてしまいます。
http://www.infofx.jp/ 上記のサイトをアップしたばかりなのですが、 xml宣言をすると右サイドがカラム落ちしてしまいます。 SEOを考えてxml宣言は外したくないのですが、良い方法があればどなたか教えて頂けますでしょうか？宜しくお願い致します。ちなみに以下がcssです。 @charset "shift_jis"; body { color: #666666; margin: 0px; padding: 0px; text-align: center; font: 75%/1.8 "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; background: #e9f3ff url(images/kabe.gif) repeat-x top; } h1,h2,h3,p,ul,li{ margin: 0px; padding: 0px; } ul{ list-style-type: none; } img { border: none; vertical-align: bottom; } #container { background-image: url(images/container_bg.gif); width: 896px; text-align: left; background-repeat: repeat-y; background-position: center; margin-top: 0px; margin-right: auto; margin-left: auto; padding-right: 4px; padding-left: 4px; } *.float { float: left; margin-right: 1em; } /*コンテンツ ----------------------------------------------------------------*/ #contents { float: left; width: 706px; } /*メイン ----------------------------------------------------------------*/ #main { float: right; width: 498px; margin-right: 9px; margin-left: 9px; display: inline; } #main h2 { background-image: url(images/midashi_bg.gif); background-repeat: no-repeat; background-position: left top; font-size: 100%; padding-left: 10px; height: 30px; padding-top: 4px; padding-right: 5px; color: #FFFFFF; letter-spacing: 0.5em; } #main p { padding-right: 10px; padding-left: 10px; padding-bottom: 15px; } /*右側 ----------------------------------------------------------------*/ #side { float: right; width: 181px ; display: inline; margin-right: 4px; margin-left: 5px; font-size: 90%; text-align:center; } #side p { margin-bottom: 10px; color: #666666; } .side-table { border: 1px solid #cccccc; padding: 2px; line-height: 2; text-align: center; background: #f7faff; } .side-table h3 { background-color: #ffffff; padding-top: 3px; padding-bottom: 2px; color: #666666; text-align: center; font-weight: normal; font-size: 100%; letter-spacing: 0.5em; margin-bottom: 10px; border: 1px solid #cccccc; } /*メニュー他 ----------------------------------------------------------------*/ #sub { float: left; width: 181px; display: inline; margin-right: 5px; margin-left: 4px; color: #666666; } #sub li { background-image: url(images/menu_arrow.gif); background-repeat: no-repeat; background-position: left center; padding-left: 25px; } #sub ul { margin-bottom: 20px; } #sub li a { color: #666666; text-decoration: none; display: block; width: 100%; } #sub li a:hover { color: #FF3B33; } .arrow-last { background-image: url(images/menu_arrow_last.gif) !important; background-repeat: no-repeat; background-position: left center; } .menu-midashi { border: 1px solid #cccccc; background-image: none !important; background-color: #ffffff; color: #666666; padding-top: 3px; padding-bottom: 2px; } /*clearfix ------------------------------------------------------------------*/ #container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #container { display: inline-block; } /* Hides from IE-mac \*/ *html #container { height: 1%; } #container { display: block; } /* End hide from IE-mac */*/
- 締切済み
- XML
- ブログを３カラム右右から左右両サイドにしたい。
現在CSSは下記のようになっています。 どこをいじれば右右から左右両サイドにできるのか教えていただけたら嬉しいです。 宜しくお願い致します。 /** 03. Layout - レイアウトの設定 */ /* ----------------------------------------------- */ body { margin: 0; padding: 0; min-width: 960px; text-align: center; background-image: none; background-repeat: repeat; background-position: 50% top; } div#containerWrap { width: 960px; margin: 0 auto 5px; } div#container {} div#content { padding: 10px 0; border-width: 1px; border-style: solid; } div#main , div#sub , div#extra { overflow: hidden; } div#main { float: left; display: inline; width: 538px; } div#main div.column-inner { padding: 0 10px 10px; } div#sub { float: left; display: inline; width: 210px; } div#sub div.column-inner { padding: 5px 10px 0; overflow: hidden; border-width: 1px; border-style: none none none solid; } div#extra { float: left; display: inline; width: 210px; } div#extra div.column-inner { padding: 5px 10px 20px; overflow: hidden; border-width: 1px; border-style: none none none solid; }
- ベストアンサー
- HTML
- DIVタグの背景に画像を配置できない
<!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>組織図</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } #figure_main div { margin:0px; padding:0px; } #figure_main ul { margin:0px; list-style-type: none; width:510px; padding: 0px; } #figure_main li { float:left; text-align:center; background-color:#FFF; border:solid 1px #ccc; padding:5px; width:110px; display:block; margin-right: 40px; } #figure_main div.blank1 { float:left; background-color: #FFF; width:510px; height:10px; } #figure_main li.list_low { margin-left:212px; } #figure_main li.list_hei { margin-left:375px; } #figure_main li.list_l { margin-right:90px; } #figure_main li.list_r { width:120px; margin-right:0; } #figure_main div.list_lineT { background:url(images/listlineT.gif); } </style> </head> <body> <div id="figure_main"> <div class="list_lineT"> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> <div class="blank1"></div> <div> <ul> <li class="list_low">営業推進部</li> <li class="list_r">メディア事業グループ</li> </ul> </div> </div> </body> </html> list_lineTクラスの背景「listlineT.gif」を指定しても表示されません。 パスは間違っていませんが。どこが違うのでしょうか？ 宜しくお願いします。
- ベストアンサー
- HTML
- HP全体を左寄せ配置するCSSの記述について。
HP全体を左寄せ配置するCSSの記述について。 CSS付きで中央表示の無料テンプレートを頂きました。 これを左寄せ配置で表示させる方法を教えて下さい。 (base.css) @charset "Shift_JIS"; /* 基本設定 */ *{ margin:0px; padding:0px; font-size:12px; font-family:Verdana, Helvetica, sans-serif; } body{ color:#333; text-align:center; } br{ letter-spacing:normal; } a{ color:#333;text-decoration:none; } a:hover{ color:#fff;text-decoration:none; } img{ border:0px; } /* テンプレート */ #temp{ width:500px; text-align:center; line-height:18px; letter-spacing:1px; margin:10px auto; } #header{ background:#fff url(img/cat.gif) no-repeat 0px 0px; width:500px;height:120px; text-align:left; border:1px solid #333; } #menu{ background-color:#333; width:500px;height:24px; color:#fff; margin:10px 0px; border:1px solid #333; } #main{ background:#fff; width:480px; text-align:left; padding:10px; border:1px solid #333; } #footer{ background:#fff; width:500px;height:30px; color:#333; line-height:30px; margin:10px 0px; border:1px solid #333; } /* タイトル部分 */ #header h1{ padding:30px 0px 0px 190px; } /* メニュー部分 */ #menu ul{ list-style-type:none; height:24px; margin-left:30px; } #menu li{ display:inline; padding:0px } #menu a{ color:#fff; line-height:24px; float:left; text-decoration:none; padding:0px 5px; } #menu a:hover{ color:#DB9400; text-decoration:none; } /* メインコンテンツの見出し */ #main h2{ background:url("img/mark.gif") no-repeat; padding:1px 0px 3px 25px; color:#DB9400; よろしくお願いします。
- ベストアンサー
- HTML
- CSSを使用したHPの左メニューとフッターについて
CSSを使用したホームページを作成しています。 左メニューとメインコンテンツ部分があります。 2点ほど、ご教授頂けますと幸いです。 1.左メニューの背景色について 現在、左メニューの背景色がメニュー周りのみとなっています。 これを左メニュー最下部（フッターの所まで）色を付けたいと思っています。 2.ブラウザのサイズ縮小によるフッターの表示について 現在、フッターを常に最下部で表示するように対応してみた所です。 ブラウザのサイズを縮小（上下を狭くする）と、フッターの部分が、左メニューの上部に重なってしまいます。 こちらを重ならないようにする方法（重なりそうになるとフッターが画面外に）はどのようにしたら宜しいでしょうか？ 以下ソースとなります。 宜しくお願い致します。 HTML --------------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="test.css" type="text/css" /> <title></title> </head> <body> <div id="container"> <div id="header"> </div> <div id="main"> <div class="category"> <h1>テスト</h1> <div class="entry_body"> 本文本文本文本文本文本文本文本文本文本文本文本文 </div> </div> </div> <div id="side"> <div class="category"> <h3>メニュー</h3> <ul> <li><a href="../test1/">test1</a></li> <li><a href="../test2/">test2</a></li> <li><a href="../test3/">test3</a></li> <li><a href="../test4/">test4</a></li> <li><a href="../test5/">test5</a></li> </ul> </div> </div> <div id="footer"> </div> </div> </body> </html> --------------------------------------------------------------- CSS --------------------------------------------------------------- html, body { height: 100%; font-size:80%; line-height: 140%; letter-spacing:1px; color: #333333; background-color:#cccccc; text-align: center; margin: 0px auto; padding: 0px; } a:hover { text-decoration: none; } #container { width:900px; min-height:100%; height:auto !important; height:100%; position: relative; margin: 0px auto; background-color:#FFFFFF; text-align: left; } #header { border-top:#003366 solid 10px; margin: 0px 0px 0px 0px; clear:both; } #main { float:right; width:688px; background: #FFFFFF; margin: 0px 5px 0px 0px; padding: 0px 0px 0px 0px; display: inline; } #main .category { width:688px; margin: 0px 0px 15px 0px; } #main h1 { font-size:105%; border-left:#003366 solid 6px; border-bottom:#cccccc solid 1px; height:17px; font-size:120%; font-weight:bold; margin: 10px 10px 10px 10px; padding: 11px 10px 10px 20px; } #main .entry_body { margin: 15px 24px 15px 24px; padding: 0px 0px 0px 0px; } #main ul { margin: 0px 30px 0px 28px; padding: 0px 0px 10px 0px; } #main ol { margin: 0px 30px 0px 35px; padding: 0px 0px 10px 0px; } #main li { line-height: 140%; margin: 0px 0px 0px 0px; padding: 0px 0px 5px 0px; } #side { float:left; font-size:12px; width:200px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background:#336699; color:#FFFFFF; } #side .category { margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px; } #side h3 { color:#FFFFFF; background:#003366; font-size:12px; text-align:left; font-weight:bold; margin: 5px 5px 5px 5px; padding: 10px 10px 10px 10px; border:#6699cc 1px solid; } #side .entry_body { margin: 5px 5px 5px 5px; padding: 10px 10px 10px 10px; background: #6699cc; } #side ul { margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; background: #6699cc; } #side li { line-height: 120%; list-style:none; margin: 5px 0px 5px 0px; border:#336699 1px solid; } #side li a, #side li a:link, #side li a:visited { color:#FFFFFF; text-decoration:none; display:block; padding: 10px 10px 10px 10px; } #side li a:hover { color:#333333; background:#99ccff; text-decoration: none; padding: 10px 10px 10px 10px; } #footer { width:900px; height:10px; background:#003366; margin: 0px 0px 0px 0px; position: absolute; bottom: 0; } ---------------------------------------------------------------
- ベストアンサー
- HTML
- ホームページテンプレートダウンロード
ホームページのテンプレートをダウンロードしました。 内容は下記のとおりです。 しかしこのままアルファエディットに貼り付けてもイメージ通りになりません。 他にimageフォルダが付いていてgifが４つあったのですが これをどこかに貼り付けなければならないのでしょうか？ 教えてください。よろしくお願いします。 @charset "UTF-8"; /* --------------------- * FONTSIZE MODEL * * --------------------- * 63% -> 10pxに相当 * 70% -> 11pxに相当 * 75% -> 12pxに相当 * 82% -> 13pxに相当 * 88% -> 14pxに相当 * 94% -> 15pxに相当 * 100% -> 16pxに相当 * 107% -> 17pxに相当 * 113% -> 18pxに相当 * 119% -> 19pxに相当 * 125% -> 20pxに相当 * --------------------- */ /* ========BASIC======== */ * { font-family:Verdana, Helvetica, sans-serif; color:#333; } body { margin:0; padding:0; line-height:1.6; letter-spacing:1px; background:#EFEFEA; } br { letter-spacing:normal; } a { color:#333; text-decoration:none; } a:hover { color:#DF8713; text-decoration:none; } img { border:0; } h1,h2,h3,h4,h5,h6 { margin:0; } /* ========TEMPLATE LAYOUT======== */ div#top { width:778px; margin:0 auto; border-left:1px solid #ccc; border-right:1px solid #ccc; background:#fff; } div#header { width:774px; margin:0 2px; background:#4f3333; } div#menu { width:774px; margin:0 2px; background:#ccc; } div#contents { clear:both; width:774px; margin:0 2px; padding:10px 0; } div#main { float:left; width:554px; padding:0 5px; } div#sub { float:right; width:200px; padding-right:5px; } div#footer { clear:both; width:774px; margin:0 2px; } /* 回り込み解除 */ div#contents:after { content:""; display:block; height:0; clear:both; visibility:hidden; } /* ========HEADER CUSTOMIZE======== */ div#header h1 { margin:0; padding:0 10px; font-size:150%;/* 24px相当 */ color:#fff; line-height:80px; } div#header h1 a { color:#fff; } div#header h1 a:hover { color:#DF8713; } /* ========MENU CUSTOMIZE======== */ div#menu ul { margin:0; padding:0; } div#menu li { float:left; font-size:82%;/* 13px相当 */ color:#333; list-style-type:none; } div#menu li a{ display:block; margin-right:1px; padding:0 20px; color:#fff; line-height:2.5; background:#9C6565; } div#menu li a:hover{ color:#fff; background:#DF8713; } /* 回り込み解除 */ div#menu ul:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } /* ========MAIN CONTENTS CUSTOMIZE======== */ div#main a { color:#DF8713; } div#main a:hover { border:0; color:#DF8713; border-bottom:1px solid #DF8713; } div#main h2 { margin-bottom:3px; padding:2px 2px 2px 5px; font-size:94%;/* 15px相当 */ font-weight:bold; border-left:5px solid #4E3333; background:url(images/bg_h2.gif); } div#main h3 { margin-bottom:2px; padding-left:25px; font-size:82%;/* 13px相当 */ background:url("images/bg_h3.gif") 0 50% no-repeat; } div#main p{ margin:0 0 1em 0; font-size:82%;/* 13px相当 */ } /* ========SUB CONTENTS CUSTOMIZE======== */ div#sub .section { margin-bottom:10px; padding:10px; background:#DEDDD0; } div#sub h2 { padding-bottom:5px; text-align:center; font-size:94%;/* 15px相当 */ font-weight:bold; color:#fff; border-bottom:1px solid #93847B; } div#sub ul { margin:0; padding:5px 0 0 10px; } div#sub li { margin:0; padding-left:12px; font-size:82%;/* 13px相当 */ background:#DEDDD0 url("images/bg_list.gif") 0 50% no-repeat; list-style:none; } /* ========TOTOP CUSTOMIZE========= */ div#totop { padding:10px; text-align:right; font-size:82%;/* 13px相当 */ } div#totop a{ padding:0 0 0 12px; background:url("images/bg_totop.gif") 0 60% no-repeat; } /* ========FOOTER CUSTOMIZE======== */ address{ padding:20px 0; text-align:center; font-style:normal; font-size:75%;/* 12px相当 */ color:#333; border-top:1px solid #ccc; }
- 締切済み
- ネットトラブル
- fire foxでリスト番号が表示されてしまう
プルダウンメニューを使っていてリストマークを表示しない設定にしていますが、firefox(ver3.0)で確認するとリスト番号(1のみ)が表示されます。原因が分かる方いらっしゃいましたら解決方法を教えてください。(下記は5つメニューがある中の3つ分のHTMLとCSSです。) ＜==HTML==> <div id="menu"> <ul class="main"> <li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">トップ</a> </li> </ul> <ul class="main2"> <li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">メニューのご紹介</a> <ol class="sub"> <li><a href="#">トップ</a></li> </ol> <ol class="sub2"> <li><a href="#">メニューのご紹介</a></li> </ol> </li> </ul> <ul class="main3"> <li class="off"onMouseOver="this.className='on'" onMouseOut="this.className='off'"> <a href="#">店舗のご案内</a> <ol class="sub3"> <li><a href="#">店舗のご案内</a></li> </ol> <ol class="sub4"> <li><a href="#">当店の歴史</a></li> </ol> <ol class="sub5"> <li><a href="#">ご予約</a></li> </ol> </li> </ul> </div> <==CSS==> /****全体位置の決定****/ #menu{ width:630px; height: 89px; float: left; z-index: 1000; margin-top: 20px; margin-left: 0px; padding-left: 0px; list-style-type: none; left: 4px; top: -12px; font-size: 0.8em; position:relative; } /****メインメニュー用スタイル****/ ul.main{ margin:0px; padding:0px; list-style:none; text-align:center; width: 126px; float: left; height: 40px; } ul.main2{ margin:0px; padding:0px; list-style:none; text-align:center; width: 126px; float: left; height: 40px; } ul.main3{ margin:0px; padding:0px; list-style:none; text-align:center; width: 126px; float: left; height: 40px; } /*通常時*/ .main li.off{ position:relative;/*×*/ float:left;/*×*/ height:40px;/*○*/ width:126px;/*○*/ overflow:hidden;/*○*/ } .main2 li.off{ position:relative;/*×*/ float:left;/*×*/ height:40px;/*○*/ width:126px;/*○*/ overflow:hidden;/*○*/ } .main3 li.off{ position:relative;/*×*/ float:left;/*×*/ height:40px;/*○*/ width:126px;/*○*/ overflow:hidden;/*○*/ } /*展開時*/ .main li.on{ float:left;/*×*/ overflow:hidden;/*×*/ width:126px;/*○*/ list-style:none; } .main>li.on{ overflow:visible;/*×*/ } .main2 li.on{ float:left;/*×*/ overflow:hidden;/*×*/ width:126px;/*○*/ list-style:none; } .main2>li.on{ overflow:visible;/*×*/ list-style-type:none; } .main3 li.on{ float:left;/*×*/ overflow:hidden;/*×*/ width:126px;/*○*/ list-style:none; } .main3>li.on{ overflow:visible;/*×*/ } /*リンクスタイル*/ .main a{ display:block; text-decoration:none; background-image: url(images/m_top.jpg); background-repeat: no-repeat; height: 40px; width: 126px; text-indent:-2000px; } .main a:hover{ background-image: url(images/m_top-on.jpg); } .main2 a{ display:block; text-decoration:none; background-image: url(images/m_menu_list.jpg); background-repeat: no-repeat; height: 40px; width: 126px; text-indent:-2000px; } .main2 a:hover{ background-image: url(images/m_menu_list-on.jpg); } .main3 a{ display:block; text-decoration:none; background-image: url(images/m_store.jpg); background-repeat: no-repeat; height: 40px; width: 126px; text-indent:-2000px; } .main3 a:hover{ background-image: url(images/m_store-on.jpg); } /****サブメニュー用スタイル****/ ol.sub{ text-align:left; margin: 0px; padding: 0px; height: 40px; width: 126px; }
- 締切済み
- HTML
お礼
完璧です！どうもありがとうございました。