Q&A
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
###前提・実現したいこと
bootstrapで多階層のnavbarを記述。
項目ごとに文字色・背景色を変更したい
###発生している問題・エラーメッセージ
CSSを指定しても、色が変更されない
bootstrap初心者です。
navbarを多階層で導入して、動作を実装することはできましたが、
子要素の文字色・背景色を指定したくても変更することができず、
bootstrapの初期設定の設定が反映されてしまいます。
クラスの指定の優先順位の問題かと思い、
色々と試しましたが反映されず、
navbarのsubmenuクラスへの色の指定方法をご教授いただけると幸いです。
###該当のソースコード
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Language" content="ja"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="webroot/assets/css/bootstrap.min.css"> <link href="webroot/assets/css/non-responsive.css" rel="stylesheet"> <link rel="stylesheet" href="style2.css"> <title>VOXARTS</title> <style> #red:hover{ color: #ff0000; background-color: #ffffff; } </style> </head> <body> <!-- 機種選択バー --> <div class="row" style="margin-bottom:20px"> <div class="dropdown"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi"> <span class="sr-only">メニュー</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="gnavi" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="red">Link1</a> <ul class="dropdown-menu multi-level"> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="red">Dropdown2</a> <ul class="dropdown-menu"> <li><a href="#">sub menu1</a></li> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a> <ul class="dropdown-menu"> <li><a href="#">sub menu3</a></li> <li><a href="#">sub menu3</a></li> <li><a href="#">sub menu3</a></li> </ul> </li> </ul> </li> </ul> </li> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown3</a> <ul class="dropdown-menu"> <li><a href="#">sub menu1</a></li> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu1</a> <ul class="dropdown-menu"> <li class="dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">sub menu2</a> <ul class="dropdown-menu"> <li><a href="#">sub menu3</a></li> <li><a href="#">sub menu3</a></li> <li><a href="#">sub menu3</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </li> <li><a href="">Link2</a></li> <li><a href="">Link3</a></li> </ul> </div> </nav> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="webroot/assets/js/vendor/jquery-1.10.2.min.js"><\/script>')</script> <script src="webroot/assets/js/bootstrap.min.js"></script> <script src="webroot/assets/js/owl.carousel.min.js"></script> <script src="webroot/assets/js/wow.js"></script> <script src="webroot/assets/js/main.js"></script> </body> </html>
###試したこと
クラス、IDでの指定は、chromeブラウザの検証を見ながら試しました
###補足情報(言語/FW/ツール等のバージョンなど)
(bootstrap3のcss、jsファイルはリンク済み)
回答1件
0
ベストアンサー
CSSを指定しても、色が変更されない
id="red"の要素はホバー時に色が変わっていますよ？
動くサンプル：https://jsfiddle.net/1nrf9rn4/
HTMLでは同一ページ内に同じIDは1つだけなので、書かれているようなコードの場合IDではなくclassを使用します。
CSS
1.navbar-default .navbar-nav .open .dropdown-menu > li > a.red:hover, 2.navbar-default .navbar-nav > li > a.red:hover { 3 color: #ff0000; 4 background-color: #ffffff; 5}
動くサンプル：https://jsfiddle.net/1nrf9rn4/3/
CSSの優先順位として「詳細度」と言う概念があるので、それを踏まえつつコーディングすればよいです。bootstrapなどのフレームワークを使用するともともとのCSS指定が長い（優先されやすい）ことがあるので、デベロッパーツールでスタイルが打ち消されている状況を確認するなどして最適なスタイル指定をしてください。
【エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 - Qiita】
http://qiita.com/izumin5210/items/8ae78cb4f4bd325bccb4
【CSS解説 -カスケード (スタイル指定が重複した場合)-】
http://www12.plala.or.jp/costellazione/css-make/cascade.html
投稿2016/08/15 15:32
総合スコア69400
あなたの回答
tips
プレビュー
