質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.77%

bootstrapで多階層のnavbarの文字・背景色の変更

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,991

score 7

前提・実現したいこと

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ファイルはリンク済み)

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/08/15 19:12

    コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

    キャンセル

回答 1

checkベストアンサー

0

CSSを指定しても、色が変更されない

id="red"の要素はホバー時に色が変わっていますよ?
動くサンプル:https://jsfiddle.net/1nrf9rn4/


HTMLでは同一ページ内に同じIDは1つだけなので、書かれているようなコードの場合IDではなくclassを使用します。

.navbar-default .navbar-nav .open .dropdown-menu > li > a.red:hover,
.navbar-default .navbar-nav > li > a.red:hover {
    color: #ff0000;
    background-color: #ffffff;
}


動くサンプル: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/16 11:34

    ご返信いただきありがとうございます。
    いただいたコードでclassに変更してもnavbarの親階層にCSSを適用することができました。
    ただ、dropdown-submenu以下の階層に適用することができませんでした。

    CSSに.dropdown-submenuを追加しましたが、うまくいきませんでした。
    こちらの指定方法について、よろしければご教授いただけませんでしょうか?

    キャンセル

  • 2016/08/16 12:37

    デベロッパーツールでスタイルが打ち消されている状況を確認するなどして最適なスタイル指定をしてください。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る