- 締切済み
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> ------------------ お分かりになる方よろしくお願いします。
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞「menu2の背景色が赤に戻らない」理由と対策なのです。 元に戻りますよ。 No.2で回答したように、プルダウンと色の変化を別の要素に指定しておかないとなりません。 li:hoverで開いておかないと、その子供のliに移動したときに閉じられてしまいます。 a:hoverで指定しておかないと、その子供に移動したときに色が戻りません。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
階層一にはリンクがない場合の対処--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"> <!-- #siteMap ol{ list-style:none; margin:0;padding:0; line-height:2em;text-align:center; } #siteMap ol li{ display:inline-block;position:relative; width:18%;min-width:4em; background-color:silver; border:solid 1px yellow; } #siteMap ol li ol{ position:absolute;top:2em;left:0; width:100%; display:none; } #siteMap ol li:hover ol li ol{display:none;top:0;left:100%;} #siteMap ol li ol li{display:block;width:100%;} #siteMap ol li:hover ol{display:block;z-index:10;} #siteMap ol li:hover ol li:hover ol{display:block;} #siteMap a,#siteMap span{display:block;text-decoration:none;width:100%;height:100%;} #siteMap a:hover,#siteMap span:hover{background-color:rgb(255,200,0);} #siteMap a[href="/B/2/1"]:hover{background-color:aqua;} #siteMap a[href="/B/2/1"]:hover:after{ content:"★新着★";color:red; position:absolute;left:100%;top:0;width:100%;text-align:left; } --> </style> <style type="text/css" media="print"> <!-- #siteMap a{text-decoration:none;color:black;} #siteMap a:after{content:"\A →(http://hoge.com"attr(href) ")";white-space:pre;} #siteMap a[href="/B/2/1"]:after{content:"【新着】\A →(http://hoge.com"attr(href) ")";white-space:pre;} --> </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>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
昨日は時間が取れなくて簡単に回答しましたが、解決しましたか？ 要は、プルダウンとマウスオーバーされたときの指定を異なる要素に指定すればよいのです。 また、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> ・・であれば必要十分です。
お礼
> 項目が増えるたびにclass名を class名は画像を使う事を考慮していたので付けました。 言葉足らずですみません。 NO.2さんへも回答をしましたが menu1,menu2のアンカーはリンク先が無いので使えません。 ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
スタイルシートをそのように書いているからです。
お礼
ありがとうございます。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
ご丁寧にありがとうございます。 ただ、私が知りたいのは質問にありますように 「menu2の背景色が赤に戻らない」理由と対策なのです。 ORUKA1951さんのソースは今後の参考にさせて頂きます。 ありがとうございました。