締切済み

CSSのプルダウンメニュー

2013/01/22 17:46

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> ------------------ お分かりになる方よろしくお願いします。

この投稿のマルチメディアは削除されているためご覧いただけません。

chiko_808
お礼率87% (14/16)

CSS
回答数4
ありがとう数3

みんなの回答 （4）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/01/25 17:46 回答No.5

＞「menu2の背景色が赤に戻らない」理由と対策なのです。　元に戻りますよ。　No.2で回答したように、プルダウンと色の変化を別の要素に指定しておかないとなりません。　li:hoverで開いておかないと、その子供のliに移動したときに閉じられてしまいます。　a:hoverで指定しておかないと、その子供に移動したときに色が戻りません。

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/01/24 16:45 回答No.4

階層一にはリンクがない場合の対処--menueC--もしてみました。　階層一にはリンクがない場合の対処--menueC--もしてみました。　とにかく難しくしないことです。シンプルイズザベスト。　時間が取れたので、簡単なサンプルを書いてみましたが、これでスマホにも幅広ディスプレイにも対応しています。(ウィンドウ幅を変えて確認) 　また印刷にも対応・・・印刷プレビューで確認　HTMLがシンプルですから、どのようにもデザインできるということです。 ※おまけに新着のリンクもわかるようにしておきました。もちろん ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) 　でチェック済みのウェブ標準です。HTML4.01strict + CSS2.1 ★<div class="header">などは<header>にすれば、そのままHTML5になります。　率直に、率直に考えることです。そうしないと、益々複雑になって、「はまっちゃいます!!」　こんなに簡単なHTML/CSSですむものです。なお、タブは＿に置換してあるので戻すこと。 <!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" media="screen">  </style> <style type="text/css" media="print">  </style> </head> <body> <div class="header"> <h1>タイトル</h1> <p>このページでは・・・・</p> <div class="nav" id="siteMap"> <ol> <li><a href="/A">menyeA</a> <ol> <li><a href="/A/1">menueA-1</a></li> <li><a href="/A/1">menueA-2</a></li> </ol> </li> <li><a href="/B">menyeB</a> <ol> <li><a href="/B/1">menueB-1</a></li> <li><a href="/B/2">menueB-2</a> <ol> <li><a href="/B/2/1">menueB-2-1</a></li> <li><a href="/B/2/2">menueB-2-2</a></li> <li><a href="/B/2/3">menueB-2-3</a></li> </ol> </li> <li><a href="/B/3">menueB-3</a> <ol> <li><a href="/B/3/1">menueB-3-1</a></li> <li><a href="/B/3/2">menueB-3-2</a></li> </ol> </li> </ol> </li> <li><span>menyeC</span> <ol> <li><a href="/C/1">menueC-1</a></li> <li><a href="/C/2">menueC-2</a></li> </ol> </li> <li><a href="/D">menyeD</a> <ol> <li><a href="/D/1">menueD-1</a></li> <li><a href="/D/2">menueD-2</a></li> </ol> </li> </ol> </div> </div> <div class="section"> <h2>見出し</h2> <p>・・・</p> </div> <div class="footer"> <h2>文書情報</h2> <dl class="documentHistry"> <dt id="FIRST-PUBLISHED">First Published</dt> <dd>2012-08-10</dd> <dt id="LAST-MODIFIED">Last Modified</dt> <dd>2012-08-10 12:00:00 (JST)</dd> </dl> <address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> </div> </body> </html>

質問者

お礼 2013/01/25 15:46

ご丁寧にありがとうございます。ただ、私が知りたいのは質問にありますように「menu2の背景色が赤に戻らない」理由と対策なのです。 ORUKA1951さんのソースは今後の参考にさせて頂きます。ありがとうございました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/01/23 14:34 回答No.3

昨日は時間が取れなくて簡単に回答しましたが、解決しましたか？要は、プルダウンとマウスオーバーされたときの指定を異なる要素に指定すればよいのです。　また、HTMLをあんなに複雑にしたら駄目です。項目が増えるたびにclass名を書き換えなければなりません。またスタイルシートが複雑になる原因にもなります。　単純に <div class="nav" id="siteMap"> ＿<ol> ＿＿<li><a href="./A">menyeA</a> ＿＿＿<ol> ＿＿＿＿<li><a href="./A/1">menueA-1</a></li> ＿＿＿＿<li><a href="./A/1">menueA-2</a></li> ＿＿＿</ol> ＿＿</li> ＿＿<li><a href="./B">menyeB</a> ＿＿＿<ol> ＿＿＿＿<li><a href="./B/1">menueB-1</a></li> ＿＿＿＿<li><a href="./B/2">menueB-2</a> ＿＿＿＿＿<ol> ＿＿＿＿＿＿<li><a href="./B/2/1">menueB-2-1</a></li> ＿＿＿＿＿＿<li><a href="./B/2/2">menueB-2-2</a></li> ＿＿＿＿＿＿<li><a href="./B/2/3">menueB-2-3</a></li> ＿＿＿＿＿</ol> ＿＿＿＿</li> ・・であれば必要十分です。

質問者

お礼 2013/01/24 14:15

> 項目が増えるたびにclass名を class名は画像を使う事を考慮していたので付けました。言葉足らずですみません。 NO.2さんへも回答をしましたが menu1,menu2のアンカーはリンク先が無いので使えません。ありがとうございました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/01/22 19:14 回答No.1

スタイルシートをそのように書いているからです。

質問者

お礼 2013/01/22 23:31

ありがとうございます。

CSSのプルダウンメニュー