- ベストアンサー
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>
- nana_watuki
- お礼率61% (142/232)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
ＩＥ及びOpera6では、 ＞「:hover，:active疑似クラスは，始点アンカー（href属性を持つa要素）と組み合わせた場合にのみ効果を持つ。」 （下記参照URLより引用） という事で、Ａ要素との組み合わせでないと「hover」というタイミングを指示できないので、実現不可能ではないかと・・・。 動的処理なのに契機が指示できないのは、ちょっと・・・。 また、今回はその包括範囲内にＡ要素が別途必要な訳なので、ダミーでＡ要素で囲うという事はＡ要素の入れ子となり不可能・・・。 という事で、ＣＧＩで事前にブラウザの判定をして表示ページを振り分けるでもしない限り、ＣＳＳのみでのポップアップメニューはあきらめるか、 ＩＥの場合は該当ＣＳＳを無効になる様に仕掛けを作るか・・・・・。
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
良き代替手段は思いつきませんが、とりあえず原因は IEではリンクアンカー(hrefを指定した<a>)以外では hover擬似クラスに対応していない ためだと思います。
お礼
＞IEではリンクアンカー(hrefを指定した<a>)以外では ＞hover擬似クラスに対応していない なるほど。これでは理論上は無理みたいですね。 ご回答いただきどうもありがとうございました。
ただ単に IE が対応していない CSS であるだけだと思います。 こういうのは古いブラウザで使えない可能性があるから JavaScript にしたほうが無難です。 …が、そうやって JavaScript 未使用のメニューを作った努力を無駄にしてはいけません。 どこかで再利用するのもひとつの手段です(^^)
お礼
ご回答いただきどうもありがとうございました。
補足
確かに古いブラウザでは使用できませんが将来的には 必要になるかと思うのでどうしても知りたいのです。 ちなみに上記のソースはIEでは動作しませんでしたが Firefox,Opera,Netscapeなどでは動作しました。 おそらくIEのバグが原因かと思うのですが 何か良い方法はないものでしょうか。 せめてIE６だけでもちゃんと表示できるようになればよいのですが・・・
- kosa
- ベストアンサー率25% (379/1464)
ポップアップメニューは、JavaScriptを使わないと出来ないと思います
お礼
ご回答いただきどうもありがとうございました。
補足
ここでいうポップアップメニューとはメニューをロールオーバーしたときに 追加のメニューが表示されるもののことです。
関連するQ&A
- ポップアップメニューの作成方法を教えてほしい
いろいろなサイトを見ながらポップアップメニューを作成しています。 ポップアップメニューのマウスオーバした時に表示されるメニューを表のように枠を入れたいのですがどうしたらいいのかわかりません。 ご教授いただけると大変助かります。 作成している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
- 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
- html,cssプルダウンメニューについて教えてください。
html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません） 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px 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:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSでプルダウンメニュー
お世話になります。 添付画像のようなプルダウンメニューを作りたいです。 http://css-eblog.com/csstechnique/css-8.html こちらを参考にさせていただき、ソースを変更しました。一応動作はするのですが、不具合があり悩んでいます。 問題はマウスオーバーさせたい画像の高さ（60px）とプルダウンで出てくるもの（画像は使用せずCSSで背景色をしたバー状になっています）の高さ（20px）が異なることです。 添付画像のように、画像A全体がマウスオーバー領域となり、20pxのバーが出るようにしたいのですが、現在はBのようにバーが60pxとなっています。 ※IE6のみ。他ブラウザではバーの高さ自体は20pxであるものの、リンク先1の領域が60pxとなっているため、リンク先2の文字が書かれている20px付近をクリックしてもリンク先1に行ってしまいます。 そこでソースの値を .menu ul li a { display: block; height: 20px;←ココ padding:3px; } と変更したら、バーは20pxで出るようになり、リンク先2もうまく選べるものの、今度は60pxの画像の上20px部分のみしかマウスオーバーに反応しなくなってしまいました。 知識がなくどうしていいのかサッパリ分かりません。 どうか助けて下さい！ 下記ソースです。 /* CSS*/ .menu { margin:0px auto; padding:0px; width:760px; height:60px; } .menu ul li { float: left; position: relative; margin-right: 0px; width: 128px; height: 20px; list-style:none; } .menu ul li table { border-collapse: collapse; border: none; font-size: 10px; padding: 0; position: absolute; top: 0; left: 0; } .menu ul li ul { visibility: hidden; overflow: hidden; position: absolute; top:60px; left: 0px; width: 128px; height:20px; z-index: 100; } .menu ul li ul li { margin-bottom: 0; width: 128px; height: 20px; } .menu ul li a { display: block; height: 60px; padding:3px; } .menu ul li a:hover { position: relative; z-index: 100; } .menu ul li:hover ul , .menu ul li a:hover ul { visibility: visible; overflow: visible; height: auto; z-index: 10; } .menu li.test {background:url(../image/test.jpg) left top no-repeat; width:128px; height:60px;} .menu li.sub { background-color:#666666; color:#FFFFFF; text-align:left; width:122px; height:20px; padding:3px;} a.sub:link{font-size:10px; color:#FFFFFF; text-decoration:none;}/*サブメニューリンク*/ a.sub:visited{font-size:10px; color:#FFFFFF; text-decoration:none;} a.sub:hover{ font-size:10px; color:#FFFFFF; text-decoration:underline;} a.sub:active{ font-size:10px; color:#FFFFFF; text-decoration:underline;} <!--html--> <div class="menu"> <ul> <li class="test"><a href="test.html"><!--[if IE 7]><!--></a><!--<![endif]--> <!--[if lte IE 6]><table><tr><td><![endif]--> <ul> <li class="sub"><a href="test.html" class="sub">リンク先1</a></li> <li class="sub"><a href="test2.html" class="sub">リンク先2</a></li> </ul> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </div> 長文申し訳ありません。よろしくお願い致します。
- ベストアンサー
- CSS
- IE9でのCSSスプライト
*****html***** <div id="head"> <ul> <li id="scope1"><a href="index.html">トップ</a></li> </ul> </div> ************* *****css***** div#head ul { position:absolute; top:10px; left:10px; width:600px; height:30px; overflow:hidden; } div#head ul li { list-style-type:none; display:inline; } div#head ul li#scope1 a{ background: url('test.png') 0px 0px; width:100px; height:50px; text-indent:-9999px; display:block; position:absolute; top:0px; left:0px; } div#head ul li#scope1 a:hover { background:url('test.png') 0px -50px; } ************** 上記のような記述で、IE9で表示させたところ、もちろんうまく動作します。 ところが、「display」の部分を2ヶ所両方ともはずしても、なんら問題なく動作しています。 block属性にするのは、<a>で指定したリンクを文字部分だけでなくを画像部分全体に 適用するためだと思っていたのですが、指定しないとまずいものなのでしょうか？
- ベストアンサー
- CSS
- CSS IEバグ リストの後の隙間を消したい
よろしくお願いします。 以下のメニューで、"sub_menu02" の下に隙間が出てしまいます。 IEのバグのようなのですが、回避方法ご教授願います。 *実際は、の部分はJAVASCRIPTによるプルダウンになってます。 --------------------------------------------------------------- <style> * { margin : 0; padding : 0; } body { margin : 0; padding : 0; background: #fafafa; } #slidemenu_sample { overflow:hidden; } #menu_1 { padding: 0; margin: 0 0 0 0; background-color: #e7f6ff; } div#contentsArea div#sNaviArea{ width: 175px; float: left; } div#contentsArea div#sNaviArea dd{ width: 163px; background: #ffffff; } div#contentsArea div#sNaviArea dd ul{ width: 163px; list-style: none; } div#contentsArea div#sNaviArea dd ul li{ width: 163px; border-top: 1px solid #dddddd; margin: 0; padding: 0; display: block; } div#contentsArea div#sNaviArea dd ul li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul li a{ display: block; padding: 5px 0 5px 17px; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li.choice{ background: #e7f6ff; } div#contentsArea div#sNaviArea dd ul.sNaviSmall li{ width: 153px; margin: 0 0 0 10px; display: block; background: #ffffff; } </style> <body> <div> <div id="contentsArea"> <div> <div id="sNaviArea"> <dl> <dd> <ul> <li><a href="">menu01</a></li ><li class="choice"><a href="">menu02</a><ul class="sNaviSmall"><li><a href="">sub_menu01</a></li><li id="slidemenu_sample"><a href="" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">sub_menu02</a><ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"><li><a href="">aaaaa</a></li><li><a href="">bbbbb</a></li><li><a href="">cccccc</a></li></ul></li ><li><a href="">sub_menu03</a></li></ul> </ul> </dd> </dl> </div> </div> </div> </div>
- 締切済み
- HTML
- IE6,IE7だとメニューが写真の裏に表示される
こんばんは。コーディング作業をしており、ヘッダーにドロップメニュー(多階層のメニューバー)を設置し、その下に写真を置いたのですが、メニューをマウスオーバーし、2階層目のカテゴリが出てきた時に、IE6.IE7だと写真の裏に隠れてしまいます。 ※ＩＥ8、ＦＦ、Ｍａｃだと写真の前にちゃんと表示されます。 ソースを添付しますので、どこがいけないかご指摘していただけないでしょうか。 よろしくお願いいたします。 [HTMLソース] <!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" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.5.2.js"></script> <script type="text/javascript" src="superfish.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery('ul#nav').superfish(); }); </script> </head> <body> <div id="container"> <div id="header" class="clearfix"> <div id="menuBottom" class="clear"> <ul id="nav" class="clearfix"> <li><a href="#"><img src="" alt="" width="88" height="29" /></a> <ul> <li><a href="#aa">menu item that is quite long</a></li> <li class="current"><a href="#ab">menu item</a> <ul> <li><a href="#">menu item</a> <ul> <li><a href="#">short</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> </ul> </li> </ul> </div><!--#menuBottom END--> </div> </div><!--#header END--> <br /><br /><br /><br /> <div id="contents"> <div id="slide" class="fltL"> <div id="slide_body"> <ul> <li style="margin-left:300px;"><img src="" width="622" height="461" alt="" /></li> </ul> </div><!--#slide_body END--> </div> <!--#slide END--> </div><!--#container END--> </body> </html> [上のhtmlに読み込まれているＣＳＳ（style.css）] #header { width:950px; margin:0 auto; padding-top:19px; z-index:100; } #menuBottom { float:right; z-index:0; } #container { width:100%; text-align: left; } /*** ドロップメニュのＣＳＳ ***/ ul li { margin:0; padding:0; } #nav ul { position:absolute; top:-999em; width:10em; /* left offset of submenus need to match (see below) */ } #nav ul li { width:100%; height:100%; } #nav li:hover { visibility:inherit; /* fixes IE7 'sticky bug' */ } #nav li { float:left; position:relative; } #nav li:hover ul, #nav li.sfHover ul { left:0; top:2.5em; /* match top ul list item height */ z-index:99; _z-index:0; } ul#nav li:hover li ul, ul#nav li.sfHover li ul { top:-999em; } ul#nav li li:hover ul, ul#nav li li.sfHover ul { left:10em; /* match ul width */ top:0; } ul#nav li li:hover li ul, ul#nav li li.sfHover li ul { top:-999em; } ul#nav li li li:hover ul, ul#nav li li li.sfHover ul { left:10em; /* match ul width */ top:0; } /*** DEMO SKIN ***/ #nav { float:left; } #nav ul li a { display:block; position:relative; padding:0.75em 1em; border-left:1px solid #fff; border-top: 1px solid #CFDEFF; text-decoration:none; height: 100%; z-index:15; } #nav a, #nav a:visited { /* visited pseudo selector so IE6 applies text colour*/ color:#13a; } #nav li li{ background:#AABDE6; } /*** 画像部分のＣＳＳ ***/ #slide { width:624px; position:relative; } #slide_header { position:absolute; top:0px; left:0px; width:624px; height:7px; z-index:2; background: url(slide_header.png) no-repeat; } #slide_body { background: url(slide_body.gif) repeat-y 0px 0px; width:624px; margin:auto; } #slide_body img { margin:auto; }
- 締切済み
- 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
- メニューボタンの背景が表示しない
ｃｓｓでメニューボタンの背景をhoverで変更しようと思っています。 が、最初からHP上にメニューボタンが表示されません。 たびたびHPを作っていますが、今回表示されない原因がわからず、 非常に困っています。 《html》 <body id="top"> <!-- ヘッダーここから --> <div id="wrap"> <div id="header"> <img src="./images/title.png"> </div> <!-- ナビボタンここから --> <div id="navi"> <ul id="menu"> <li><a href="top.html" >TOP</a></li> <li><a href="menu.html" >メニュー＆料金</a></li> <li><a href="access.html" >アクセス</a></li> <li><a href="question.html" >お問い合わせ</a></li> </ul> </div> <!-- コンテンツここから --> <div id="contents"> 以下 省略 《css》 #navi{ width: 750px; height:45px; margin: 0px; } #menu { margin: 0; padding :0; list-style-type : none; } #menu li { margin:0; float:left; } #menu li a{ display:block; width: 150px height: 43px; text-align:center; text-decoration: none; background-image: url(images/navi_b.png); background-repeat: no-repeat; } どこが間違っているのか指摘していただけないでしょうか。
- ベストアンサー
- HTML
お礼
＞「:hover，:active疑似クラスは，始点アンカー（href属性を持つa要素）と組み合わせた場合にのみ効果を持つ。」 確かにこれでは不可能ですね。ＣＳＳのみでのポップアップメニューはあきらめます。 ご回答いただきどうもありがとうございました。