CSSのプルダウンメニュー

締切済

質問者：chiko_808
質問日時：2013/01/22 17:46
回答数：4件

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件)

最新から表示
回答順に表示

No.5

回答者： ORUKA1951
回答日時：2013/01/25 17:46

＞「menu2の背景色が赤に戻らない」理由と対策なのです。

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

- 0
- 件

通報する

No.4

回答者： ORUKA1951
回答日時：2013/01/24 16:45

　階層一にはリンクがない場合の対処--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>

- 0
- 件

通報する

この回答へのお礼

ご丁寧にありがとうございます。

ただ、私が知りたいのは質問にありますように
「menu2の背景色が赤に戻らない」理由と対策なのです。

ORUKA1951さんのソースは今後の参考にさせて頂きます。
ありがとうございました。

通報する

お礼日時：2013/01/25 15:46

No.3

回答者： ORUKA1951
回答日時：2013/01/23 14:34

昨日は時間が取れなくて簡単に回答しましたが、解決しましたか？

要は、プルダウンとマウスオーバーされたときの指定を異なる要素に指定すればよいのです。

　また、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>
・・であれば必要十分です。