0

私はサイトを構築しており、開発時間を大幅に節約できる Bootstrap フレームワークを利用しています。

問題

リンクのコレクションとドロップダウン リンクがいくつかあり、残りは通常のリンクです。

リンクに別の背景色を与えることで、ドロップダウンメニューなしでリンクのホバー状態を正常に変更できました。

しかし、私が抱えている問題は、ドロップダウン メニューがあるリンクの背景色を変更できないことです。ドロップダウン メニューの実際の背景色ではなく、ナビゲーション バーのナビゲーション ピル リンクを意味します。

次の CSS コードを使用して、カスタム スタイル スタイルシート (styles.css) の問題を解決しようとしています。

.nav-pills {
    padding-top: 20px;
}

.nav-pills > li > a {
    font-size: 15px;
    color: #37404e;
    border-radius: 5px 5px 0 0;
    padding: 10px;
}

.nav-pills > li > a:hover {
    background-color: #418bca;
    color: #fff;
}

/* --- dropdown-menu --- */
.dropdown-menu {
    margin-top: -5px;
}

.dropdown-menu > li {
    font-size: 15px;
}

.dropdown-menu > li > a {
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
}

.dropdown-menu > li > a:hover {
    background-color: #ff6347;
    color: #fff;
}

.dropdown-header {
    color: #418bca;
}

私はこれに対する修正を見つけることができないようです。

これを修正する方法についてのアドバイスをいただければ幸いです。

4

2 に答える 2

0

これを試して：

デモ：

<nav class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Brand</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav nav-pills">
                        <li class="active"><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                                <li class="divider"></li>
                                <li><a href="#">One more separated link</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container-fluid -->
        </nav>
于 2014-08-26T05:30:26.760 に答える
0

これらをスタイルとして使用しました：

.navbar-default .navbar-nav .nav > li > a:hover,
.navbar-default .navbar-nav .nav > li.dropdown.active.open > a:hover,
.navbar-default .navbar-nav .nav > li.dropdown.active.open > ul.dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .nav > li.dropdown.open > a:hover,
.navbar-default .navbar-nav .nav > li.dropdown.open > ul.dropdown-menu a:hover,
.navbar-default .navbar-nav .nav > li.dropdown.open > a,
.navbar-default .navbar-nav .nav > li.dropdown.open > ul.dropdown-menu a,

{
  background-color: #fff;
  border-color: #fff;
}

>HTML の構造によっては、最初のセレクターの前にセレクターを変更する必要がある場合があります。

于 2014-12-10T15:20:50.703 に答える