- 締切済み
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> 宜しくお願い致します。
- pokapoka1980
- お礼率40% (165/403)
- CSS
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
<!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/grouping-content.html#the-div-element ) 著者は、 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>
- yambejp
- ベストアンサー率51% (3827/7415)
ちょっと意味がわかりづらいのですが サブメニューに移ってもメインの背景がピンクのままということ？ であれば ＞#menu > li > a:hover { background:lightpink; } #menu > li:hover > a { background:lightpink; } とすればよいかと ただし、古いブラウザだとliのhoverを認識してくれない場合もあるので注意
