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

締切済

質問者：pokapoka1980
質問日時：2013/08/22 19:40
回答数：2件

下のサイトを参考にドロップダウンメニューを作成したのですが、
ドロップダウンで出てくるサブメニューにマウスを移動した際、一番上のメニューの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>

宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

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

No.2

回答者： ORUKA1951
回答日時：2013/08/23 00:36

<!DOCTYPE html>

HTML5のつもりかな？？？ならもっとも基本的なこと!!
　DIVは他に適当な要素がないときの最後の手段です。【原則として使わない!!】
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable.Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.( http://www.w3.org/TR/2012/CR-html5-20121217/grou … )
著者は、 div要素を、他に適切な要素がないときなど、最後の手段として考えることを強く推奨する。適切な要素を使うことは、読者にとってはアクセシビリティ向上に、著者にとってメンテナンス性の向上につながる。

それによって、HTML/CSSは、下記のように簡単なものになります。
CSSの意味もHTML見なくても、何を指定しているかすぐわかる。
nav ul li:hover{}
　ナビゲーションの子孫のulの子孫のliにhover・・・
　このくらいなら、差はないけど、大きなページになると、<DIV>や意味のないidやclass名を記述しているとワケワカメになります。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
nav ul,nav ul li{
list-style:none;
margin:0;padding:0;
line-height:2em;
}
nav ul li{
display:inline-block;
width:6em;
text-align:center;
position:relative;
}
nav ul li ul{
position:absolute;
top:100%;left:1em;
background-color:rgb(255,200,200);
display:none;
}
nav ul li a{
display:block;
width:100%;height:100%;
}
nav ul li:hover ul{
display:block;
}
nav ul li ul li{
display:block;
}
nav ul li:hover{
background-color:red;
}
</style>
</head>
<body>
<nav>
＿<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>
</nav>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： yambejp
回答日時：2013/08/22 21:26

ちょっと意味がわかりづらいのですが

サブメニューに移ってもメインの背景がピンクのままということ？
であれば

＞#menu > li > a:hover { background:lightpink; }

#menu > li:hover > a { background:lightpink; }

とすればよいかと
ただし、古いブラウザだとliのhoverを認識してくれない場合もあるので注意