• 締切済み

ポップアップメニューの作成方法を教えてほしい

いろいろなサイトを見ながらポップアップメニューを作成しています。 ポップアップメニューのマウスオーバした時に表示されるメニューを表のように枠を入れたいのですがどうしたらいいのかわかりません。 ご教授いただけると大変助かります。 作成しているHTMLは下記になります。自由に変更していいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <!-- TemplateBeginEditable name="doctitle" --> <style type="text/css"> <!-- body,td,th {font-size: small;　}　--> body {padding: 30px; } /* 全体の文字の色 テキストの下線など*/ ul.menu a { color: #ff6100; text-decoration: none; text-align: center; border-color: #000000; } ul.menu a:link, /* 全体の表の背景の色 */ ul.menu a:visited { background: #ffffff } /* 表全体　マウスオーバー時の背景の色 */ ul.menu a:hover{ background-color: #FF6; } ul.menu a:active { } /* 診療科　セルの変更 */ ul.menu li { float: left; position: relative; margin: 0 ; width: 9em; height: 2em; font-weight: none; line-height: 2em; } ul.menu li a { display: block; width: 9em; height: 2em; text-align: left; border:none; } ul.menu li ul li { float: none; margin: 0; font-weight: normal; border:none; } /* 下層のメニューを不可視に */ ul.menu li ul, ul.menu li ul li ul { display: none; } /* 疑似要素 :hover で子メニューを可視、孫メニューを不可視に 各科のセル　診療科*/ ul.menu li:hover ul { display: block; position: absolute; top: 0; left: 8em; z-index: 200; } * html ul.menu li:hover ul { vertical-align: bottom; /* IE6 で変な隙間が空くのでその対策 */ } ul.menu li:hover ul li ul { display: none; } /* 疑似要素 :hover で孫メニューを可視に */ ul.menu li ul li:hover ul { display: block; position: absolute; top: 0; left: 8em; z-index: 200; } </style></head> <table width="208" border="0" cellspacing="0" cellpadding="0" background=""> <tr> <td colspan="2" bgcolor="#FFFFFF"><ul class="menu"> <li><a href="#">■診療科</a> <ul><li style="display:inline"> <a href="program/02gairai/naika02.html" target="_parent">内科</a></li> <li style="display:inline"> <a href="program/02gairai/sannfu02.html" target="_parent">産婦人科</a></li> <li style="display:inline"> <a href="program/02gairai/masui02.html" target="_parent">麻酔科</a></li> <ul> <li style="display:inline"> <a href="program/02gairai/geka02.html" target="_parent">外科</a></li> <li style="display:inline"> <a href="program/02gairai/hifuka02.html" target="_parent">皮膚科</a></li> <li style="display:inline"> <a href="program/02gairai/sikakoukuu02.html" target="_parent">歯科口腔外科</a></li> <ul><li style="display:inline"> <a href="program/02gairai/seikei02.html" target="_parent">整形外科</a></li> <li style="display:inline"> <a href="program/02gairai/ganka02.html" target="_parent">眼科</a></li> <li style="display:inline"> <a href="program/02gairai/sinkei02.html" target="_parent">神経内科</a></li> <ul><li style="display:inline"> <a href="program/02gairai/nousinkei02.html" target="_parent">脳神経外科</a></li> <li style="display:inline"> <a href="program/02gairai/jibiinkouka02.html" target="_parent">耳鼻咽喉科</a></li> <li style="display:inline"> <a href="program/02gairai/housya02.html" target="_parent">放射線科</a></li> <ul><li style="display:inline"> <a href="program/02gairai/syounika02.html" target="_parent">小児科</a></li> <li style="display:inline"> <a href="program/02gairai/hinyou02.html" target="_parent">泌尿器科</a></li> <li style="display:inline"><a href="program/02gairai.htm" target="_parent">診療部</a></li> </ul> </ul> </ul> </ul> </ul> </li> </ul></td> </tr> 長くなりましたがどうぞよろしくお願いいたします。

  • CSS
  • 回答数4
  • ありがとう数1

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

＞styleにある#medicineSpecialtyはどのような意味ですか。 　medicine Specialtyは診療科のような意味で、勝手につけました。 <div class="section" id="medicineSpecialty"> 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 　ひとつのセクションであり--他にもある可能性があるのでclass---、診療科なのでそれらしき、後で自分に解るようにIDをつけておいた。 　言い換えれば<div class="section" id="medicineSpecialty">～</div>に固有名を付けた。 #medicineSpecialty h2はセレクタで、半角スペースでつなげてあるので子孫セレクタ、以下同様 :hover擬似クラス、そのうちの動的な擬似クラス :afterは擬似要素 　詳しくは、5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

追記 　:hover擬似クラスを認識しない古いブラウザ対象に<a href="medicineSpecialty.html">診療科目</a>のように、実際に科一覧のHTMLを用意してリンクさせておくほうが無難でしょう。 　折角スタイルシートを使うのですから、文書構造以外は、要素も属性もHTMLに書かないように、そうすればHTMLもスタイルシートもシンプルにメンテナンスしやすくなります。tableもデザインのために使わない!!! 　表はあくまで本当に表であるときだけです。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

一度 ポップアップメニューを表のように表示させたい - HTML - 教えて！goo ( http://okwave.jp/qa/q7796388.html ) で回答しているはずですが？？？？？。 　HTMLが間違っています。<ul>内に<ul>は書けません。<ul>や<ol>内には<li>以外は書けません。HTMLが間違っているとスタイルシートを適用することはできません。 ※メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。 ( http://jigsaw.w3.org/css-validator/#validate_by_input )より 1) ポップアップはスタイルシートではできません。上記に書きました。 　　率直にjavascriptを使うほうが楽です。 折角スタイルシートを使うなら、transitionalな書き方はしないほうが良いです。 border="1"なら、ともかく　(後方互換のため書いておいても良い) 　 width="208" border="0" cellspacing="0" cellpadding="0" background=""は書かない。 　　bgcolor="#FFFFFF"も書かない。 　これらは、スタイルシートで指定しましょう。 　　target属性は、strictは無論、transitoalにもありません。 　診療科の一覧はどう見ても表にはなりませんね。 ┌──────┬──────┐ │　　内科　　│　　外科　　│ ├──────┼──────┤ │　一般内科　│　一般外科　│ ├──────┼──────┤ │　総合内科　│総合診療外科│ ├──────┼──────┤ │　総合診療科│臓器移植再建外科│ ├──────┼──────┤ │総合診療内科│　　　　　　│ └──────┴──────┘ とかなら表ですが・・・ざっと見るとすべて並列な科名のようです。--旧来の診療科区分に従えば すなわち、マークアップはtableは不要で <div class="section" id="medicineSpecialty"> 　　<h2>診療科目</h2> 　　<ul> 　　　　<li>外科</li> 　　　　<li>内科</li> 　　　　<li>産婦人科</li> 　　　　<li>麻酔科</li> 　　　　<li>外科</li> 　　　　<li>皮膚科</li> 　　　　<li>歯科口腔外科</li> 　　　　<li>整形外科</li> 　　　　<li>眼科</li> 　　　　<li>神経内科</li> 　　　　<li>脳神経外科</li> 　　　　<li>耳鼻咽喉科</li> 　　　　<li>放射線科</li> 　　　　<li>小児科</li> 　　　　<li>泌尿器科</li> 　　　　<li>診療部</li> 　　</ul> </div> だけのほうが文書の意味からは良いと思います。 これを:hoverで表示させるなら ★ポップアップではありません。★ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ #medicineSpecialty{width:70%;margin:0 auto;position:relative;} #medicineSpecialty h2{margin:0;line-height:30px;} #medicineSpecialty h2:after{font-size:0.5em;color:red;content:"ここにポインターをあわせてください。";} #medicineSpecialty ul{display:none;margin:0;padding:0;position:absolute;top:29px;left:0;z-index:100;} #medicineSpecialty ul li{display:block;list-style-type:none;margin:0;padding:0.5em 1em;width:7em;float:left;border:solid 1px gray;background-color:silver;} #medicineSpecialty:hover ul{display:block;} #medicineSpecialty:after { content: ""; display: block; clear: left; } と簡単なものでよいでしょう。ウィンドウ幅が狭くてもtableじゃないのですべて表示されるはずです。 ★HTMLは、transitinalで作成し、余分なものは書かない。 ★必ずAnother HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )などでチェックしましょう。 　その上でスタイルシートを書き始めること!!HTMLがちゃんとできてなきゃデザインできません。 　スタイルシートの意味は、仕様書で確認する癖をつけましょう。そうすれば身につきます。 Property index ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/propidx.html ) [HTML]前文★タブは全角スペースに置換してあります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> 　<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> 　<title>サンプル</title> 　<meta name="author" content="ORUKA1951"> 　<meta http-equiv="Content-Style-Type" content="text/css"> 　<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > 　<link rel="START" href="../index.html"> 　<style type="text/css"> <!-- #medicineSpecialty{width:70%;margin:0 auto;position:relative;} #medicineSpecialty h2{margin:0;line-height:30px;} #medicineSpecialty h2:after{font-size:0.5em;color:red;content:"ここにポインターをあわせてください。";} #medicineSpecialty ul{display:none;margin:0;padding:0;position:absolute;top:29px;left:0;z-index:100;} #medicineSpecialty ul li{display:block;list-style-type:none;margin:0;padding:0.5em 1em;width:7em;float:left;border:solid 1px gray;background-color:silver;} #medicineSpecialty:hover ul{display:block;} #medicineSpecialty:after { content: ""; display: block; clear: left; } --> 　</style> </head> <body> 　<div class="header"> 　　<h1>タイトル</h1> 　　<p>このページでは・・・・</p> 　</div> 　<div class="section" id="medicineSpecialty"> 　　<h2>診療科目</h2> 　　<ul> 　　　<li>外科</li> 　　　<li>内科</li> 　　　<li>産婦人科</li> 　　　<li>麻酔科</li> 　　　<li>外科</li> 　　　<li>皮膚科</li> 　　　<li>歯科口腔外科</li> 　　　<li>整形外科</li> 　　　<li>眼科</li> 　　　<li>神経内科</li> 　　　<li>脳神経外科</li> 　　　<li>耳鼻咽喉科</li> 　　　<li>放射線科</li> 　　　<li>小児科</li> 　　　<li>泌尿器科</li> 　　　<li>診療部</li> 　　</ul> 　</div> 　<div class="footer"> 　　<h2>文書情報</h2> 　</div> </body> </html>

kkokuryou
質問者

お礼

何度もご教授頂き有難うございます。 大変助かりました。自分が無知なことがよくわかりました。 styleにある#medicineSpecialtyはどのような意味ですか。 できれば教えて頂いたhtmlの内容を理解して利用させて頂きたいと思っています。 どうぞよろしくお願い申し上げます。

  • Gletscher
  • ベストアンサー率23% (1525/6504)
回答No.1

ソースを書く必要はないと思います。書いてあっても見ないですけどね(^o^) やりたいことが分かりませんが、ポップアップというのは、普通はリンク文字やリンクバナーをクリックすると、別窓を開いて表示することを言います。 「ポップアップメニューのマウスオーバした時」と言われていますが、その意味が不明です。 また、「メニューを表のように枠を入れたい」とのことですが、それとポップアップは無関係ですね？ リンクをポップアップさせるにはJavascriptでプログラムを組みます。 <BODY>の前でJavascriptを宣言してください。 function PopUpWindow(URL,Wname,Wwidth,Wheight) { window.open(URL,Wname,"width="+Wwidth+",height="+Wheight+",scrollbars=yes,resizable=no,toolbar=no,location=no,directories=no,status=no") // window.open(URL,Wname,"width=Wwidth,height=Wheight,scrollbars=yes,resizable=no,toolbar=no,location=no,directories=no,status=no") } そして、ポップアップさせたいリンク部分で「PopUpWindow」を呼び出せば良いです。 ↓こんな感じです。 <a href="JavaScript:PopUpWindow('jump.htm','photo','600','400')">ここをクリック</a> ※('jump.htm','photo','600','400')　に部分の説明 (ジャンプ先ファイル名 , オープンさせる窓の名前 , 横×オープンする窓の縦サイズ) マウスオーバーだけでポップアップさせるには別の高等技術が必要です。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • CSSでポップアップメニューを作成したがIEだけメニューが表示されません。

    下記のようなCSSでポップアップメニューを作成したのですが IEだけポップアップメニューが表示されませんでした。 IEでもポップアップメニューが表示されるようにするには どのようにすればよいのでしょうか？（JavaScriptは未使用で作成） <html> <head> <style type="text/css"> #menu { position: relative; width: 102px; height: 22px; } #menu li { list-style-type: none; float: left; } #menu li a { color: gray; width: 100px; height:20px; text-decoration: none; text-align: center; border: 1px solid gray; display: block; } #menu li a:hover { background-color:#FFFFCC; } #menu ul li ul { display: none; } #menu ul li:hover ul { display:block; position:absolute; top: 22px; left: 0; } </style> </head> <body> <div id="menu"> <ul> <li> <a href="#">home</a> <ul> <li><a href="#">first</a></li> <li><a href="#">second</a></li> <li><a href="#">third</a></li> </ul> </li> </ul> </div> </body> </html>

    • ベストアンサー
    • HTML
  • 縦並びメニューの枠線が重ならない

    いつもこちらではお世話になり、ありがとうございます。 ｃｓｓのli:hoverを使ってサブメニューを表示させようとしていますが、 縦並びのサブメニューの枠線が重なってくれません。 どこが間違えているのでしょうか。 ご指摘をお願いいたします。 （素人ですので、他にもつっこみどころがかなりあると思います。 すみません（汗）） 【html】 <ul class="menu"> <li><a href="menu1.html" >メニュー１</a></li> <li><a href="menu2.html">メニュー２</a> <ul> <li><a href="submenu1.html">サブメニュー１</a></li> <li><a href="submenu2.html">サブメニュー２</a></li> </ul> </li> <li><a href="menu3.html" >メニュー３</a></li> <li><a href="menu4.html" >メニュー４</a></li> </ul> 【css】 ul.menu { margin: 0px; padding:0; list-style-type : none; } ul.menu li { margin:0; float:left; width: 107px; line-height: 43px; } ul.menu li a{ display:block; text-align:center; text-decoration: none; background-image: url(images/navi_b.png); background-repeat: no-repeat; color: #202020; font-family: "メイリオ"; font-size: 11px; } ul.menu li a:hover{ background-image: url(images/navi_r.png); } ul.menu li ul{ display: none; position: absolute; top: 165px; left: 210px; list-style-type : none; background-image: none; } ul.menu li:hover ul{ display: block; } ul.menu li ul li{ clear: left; width: 106px; line-height: 35px; border: 1px #989590 solid; border-collapse: collapse; } ul.menu li ul li a{ background: none; background-color:#B28872; color:#ffffff; } ul.menu li ul li a:hover{ background: none; background-color: #643E3E; color:#ffffff; } よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSのプルダウンメニュー

    menu1とmenu2の挙動について疑問があります。 添付画像をご覧ください。 menu2からsub4-1を選択している状態です。 この時、menu2の背景色が赤に戻らないのは仕様でしょうか？ それとも何か間違っているのでしょうか？ 背景を画像にしても同じ結果になります。 -------------------------------------------- ul#menu li{ float:left; list-style-type:none; text-align:center; } ul#menu ul li{ clear:both; } ul#menu li a,.menu1,.menu2{ display:block; width:200px; height:50px; line-height:50px; text-decoration:none; background:#ff0000; } ul#menu li a:hover,.menu1:hover,.menu2:hover{ background:#ffcc00; } ul#menu ul{ display:none; } ul#menu li:hover > ul{ display:block; position:absolute; } ul#menu ul ul{ margin:-50px 0 0 200px; } --------------------- <ul id="menu"> <li class="menu1">menu1</a> <ul> <li><a href="#">sub1</a> <ul> <li><a href="#">sub1-1</a></li> <li><a href="#">sub1-2</a></li> </ul> </li> <li><a href="#">sub2</a></li> </ul> </li> <li class="menu2">menu2</a> <ul> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a> <ul> <li><a href="#">sub4-1</a></li> <li><a href="#">sub4-2</a></li> </ul> </li> </ul> </li> </ul> ------------------ お分かりになる方よろしくお願いします。

    • 締切済み
    • CSS
  • CSSのみでのドロップダウンメニューについて

    下のサイトを参考にドロップダウンメニューを作成したのですが、 ドロップダウンで出てくるサブメニューにマウスを移動した際、一番上のメニューのhoverの効果が消えてしまい困っています。 どうすれば、サブメニューにマウスを移動しても一番上のメニューのhoverの効果を残せるようにできるのでしょうか？ 【参考にしたサイト】 http://weboook.blog22.fc2.com/blog-entry-359.html （このサイトでは綺麗に動いています。。） 【私のコード】 <!DOCTYPE html> <html> <head> <style type="text/css"> /** １階層目 **/ #menu { list-style-type: none; } #menu > li { position: relative; float: left; text-align: center; } #menu > li > a { display:inline-block; margin-left:20px; line-height: 1; } #menu > li > a:hover { background:lightpink; } /** ２階層目 **/ #menu > li > ul { position: absolute; top: 100%; left: 0; list-style-type: none; } #menu > li > ul > li { position: relative; overflow: hidden; height: 0; width: 200px; text-align:left; } #menu > li:hover > ul > li { overflow: visible; height:2em; } </style> </head> <body> <div> <ul id="menu"> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a> <ul> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> </ul> </li> </ul> </div> </body> </html> 宜しくお願い致します。

    • 締切済み
    • CSS
  • サブメニュー表示方法

    以下のサイトのようなナビゲーションを作っています。 http://www.skuare.net/test/jHsubnav.html マウスオーバーでサブメニューが出るのではなく 最初からHOMEの サブメニューを表示しておくには、どのようにしたらよいでしょうか。 初心者で、わからず困っています。 よろしくお願い致します。 ------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> ul#topnav { margin: 0; padding: 0; list-style: none; position: relative; font-size: 1.2em; background: #000; } ul#topnav li { float: left; margin: 0; padding: 0; border-right: 1px solid #555; } ul#topnav li a { padding: 10px 15px; display: block; color: #000; text-decoration: none; } ul#topnav li:hover { background: #1376c9; } ul#topnav li span { float: left; padding: 15px 0; position: absolute; left: 0; top:35px; display: none; background: #1376c9; color: #fff; } ul#topnav li:hover span { display: block; } ul#topnav li span a { display: inline; } ul#topnav li span a:hover {text-decoration: underline;} </style> <script type="text/javascript" src="http://alphasis.info/library/javascript/jquery/jquery-1.4.2.js"></script> <title>無題ドキュメント</title> </head> <body> <script type="text/javascript"> $(document).ready(function(){ $("ul#topnav li").hover(function() { //メインメニュー（#topnavi li）にマウスが乗った時 $(this).css({ 'background' : '#1376c9'}); //その要素の背景色を変える $(this).find("span").show(); //サブメニューを表示 } , function() { $(this).css({ 'background' : 'none'}); //背景色を戻す $(this).find("span").hide(); //サブメニュー隠す }); }); </script> <ul id="topnav"> <li><a href="#">Home</a> <span> <a href="#">The Company</a> | <a href="#">The Team</a> | <a href="#">Careers</a> </span> </li> <li> <a href="#">About</a> <span> <a href="#">The Company</a> | <a href="#">The Team</a> | <a href="#">Careers</a> </span> </li> </ul> </body> </html>

  • リスト項目でのメニュー作成

    リスト項目を使いcssでメニューを作成しているのですが、下記のような記述でメニュー1の部分だけ違う色を指定したい場合、どのように記述すればよいのでしょうか？ <html lang="ja"> <head> <style type="text/css"> ul#menu li { list-style-type: none; float: left; padding: 0px; line-height: 22px;font-size:14px;width: 110px; margin-left: 2px;} ul#menu li a { text-decoration: none; display: block; / padding: 5px; color: #black; background-color: #8BCFDE } ul#menu li a:hover { background-color: #ff9999; color: #black; } </style> </head> <body> <ul id="menu"> <li><a href="#/">メニュー1</a></li> <li><a href="#/">メニュー2</a></li> <li><a href="#/">メニュー3</a></li> <li><a href="#/">メニュー4</a></li> <li><a href="#/">メニュー5</a></li> <li><a href="#/">メニュー6</a></li> </ul> </body> </html>

    • ベストアンサー
    • HTML
  • JavaScriptで折りたたみメニュー

    現在、JavaScriptを利用して折りたたみメニューを作成しました。 2つの項目の下にそれぞれ下層メニューがあり、各項目をクリックするごとに下層メニューが開いたり閉じたりできる状態なのですが、 このどちらかの項目をクリックしたとき、その項目の下層メニューは表示されるが、もう一方の項目の下層メニューは閉じる。というようにするにはどうすればよいでしょうか？（両方の下層メニューが同時に開いている状態が無いように。） よろしくお願いいたします。 【XHTML】 <ul> <li><a href="javascript:exMenu('treeMenu1')">項目1</a> <ul id="treeMenu1" style="display:none"> <li><a href="#">項目1-1</a></li> <li><a href="#">項目1-2</a></li> <li><a href="#">項目1-3</a></li> </ul> </li> <li><a href="javascript:exMenu('treeMenu2')">項目2</a> <ul id="treeMenu2" style="display:none"> <li><a href="#">項目2-1</a></li> <li><a href="#">項目2-2</a></li> <li><a href="#">項目2-3</a></li> </ul> </li> </ul> 【JavaScript】 function exMenu(tName) { tMenu = document.getElementById(tName).style; if (tMenu.display == 'none') tMenu.display = "block"; else tMenu.display = "none"; }

  • xhtmlでページを作ったらcssのhoverの部分がFirefoxで

    xhtmlでページを作ったらcssのhoverの部分がFirefoxでは動くのにIEでは上手く動きません。 どうしたらいいのでしょうか？ --xhtml-- <div class="menu"> <ul> <li><a href="#"target="content">link1</a><br/></li> <li><a href="#"target="content">link2</a><br/></li> <li><a href="#"target="content">link3</a><br/></li> </ul> </div> --css-- .menu{ width:100%; position:absolute; bottom:25%; font-weight:bolder; filter: alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; } .menu ul{ margin:0; padding:0; } .menu li{ margin-bottom:1px; list-style-type:none; float:none; font-size:1.3em; line-height:0; } .menu li a{ display:block; width:100%; line-height:25px; background-color:#ba2029; color:#ffffff; text-align:center; text-decoration:none; border-left:solid 10px #880000; } .menu li a:hover{ background-color:#95195a; }

    • ベストアンサー
    • 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); }

  • 横並びのメニューにならない

    初心者です。 dreamweaverで、メニューを横並びにしたいのですが、縦のままです。 <div id="#navi"> <ul> <li><a href="index.html">ホーム</a></li> <li><a href="#">お支払・送料</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </div> という風に作って CSSが、 #navi { height: 30px; width: 750px; } #navi ul { list-style: none; } #navi li { display: inline; 　　　　　　float: left; } #navi li a{ 　　　　　text-align: center; 　　　　　display:block; } としました。 どこが間違っているのでしょうか？ あるいは何か足りないのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する