Невозможно изменить цвет для мыши над

Question

Я пытаюсь изменить цвет фона на синий, когда нажимаю на CSS. Я смог сделать это вчера, но не знаю, почему он не работает сегодня, а его спина к белому. Был у него часами и не мог понять, что случилось. Обратите внимание, что я хочу сделать это с помощью CSS, а не javascript. Это было выполнено с помощью CSS.

Это скриншот. Я хочу, чтобы эта белая часть была синей, когда я наводил верх. Прямо сейчас, когда я нахожусь, он белый.

Мой CSS код, который работает правильно, изменяя его в синий цвет при наведении мыши.

.dropdown-menu { 
    background-color: #c1d100; 
} 

.dropdown-menu > li > a:hover, 
.dropdown-menu > li > a:focus { 
    color: #fff; 
    background-color: #1a3278; 
} 

Code Pen

Добавлен код Pen. Вышеприведенный код находится в строках CSS 132-140. Я скопировал свой точный код, но в кодовой ручке все кажется дефолтом. Черный шрифт, белый фон для выпадающего списка.

CSS Файл

@font-face { 
    font-family: KenzoCustom; 
    src: url('../fonts/kenzo-regular.otf'); 
} 

body{ 
    /*background-color: #eaeaf4;*/ 
    font-family: KenzoCustom, serif; 
} 

.formClass{ 
    max-width: 350px; 
    min-width: 350px; 
    margin: 0 auto; 
} 

.img-responsive{ 
    margin: 0 auto; 
} 

.logo-marpad{ 
    margin-top: 40px; 
    padding-bottom: 80px; 
} 

.form-group{ 
    text-align: center; 
} 

.input-center{ 
    margin: 0 auto; 
} 

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary { 
    background-color: #c1d001; 
    border-color: #c1d001; 
} 

.btn { 
    background-color: #c1d001; 
    border-color: #c1d001; 
} 

/* remove whitespace after navbar*/ 
.navbar { 
    margin-bottom: 0; 
} 

/* navbar-custom */ 
.navbar-custom { 
    background-color: #1a3278; 
    border-color: #1a3278; 
    border-radius: 0 !important; 
} 
.navbar-custom .navbar-brand { 
    color: #1a3278; 
} 
.navbar-custom .navbar-brand:hover, 
.navbar-custom .navbar-brand:focus { 
    color: #e6e6e6; 
    background-color: transparent; 
} 
.navbar-custom .navbar-text { 
    color: #ffffff; 
} 
.navbar-custom .navbar-nav > li:last-child > a { 
    border-right: 1px solid #14275d; 
} 
.navbar-custom .navbar-nav > li > a { 
    color: #ffffff; 
    border-left: 1px solid #14275d; 
} 
.navbar-custom .navbar-nav > li > a:hover, 
.navbar-custom .navbar-nav > li > a:focus { 
    color: #c0c0c0; 
    background-color: transparent; 
} 
.navbar-custom .navbar-nav > .active > a, 
.navbar-custom .navbar-nav > .active > a:hover, 
.navbar-custom .navbar-nav > .active > a:focus { 
    color: #c0c0c0; 
    background-color: #14275d; 
} 
.navbar-custom .navbar-nav > .disabled > a, 
.navbar-custom .navbar-nav > .disabled > a:hover, 
.navbar-custom .navbar-nav > .disabled > a:focus { 
    color: #cccccc; 
    background-color: transparent; 
} 
.navbar-custom .navbar-toggle { 
    border-color: #dddddd; 
} 
.navbar-custom .navbar-toggle:hover, 
.navbar-custom .navbar-toggle:focus { 
    background-color: #dddddd; 
} 
.navbar-custom .navbar-toggle .icon-bar { 
    background-color: #cccccc; 
} 
.navbar-custom .navbar-collapse, 
.navbar-custom .navbar-form { 
    border-color: #14265b; 
} 
.navbar-custom .navbar-nav > .dropdown > a:hover .caret, 
.navbar-custom .navbar-nav > .dropdown > a:focus .caret { 
    border-top-color: #c0c0c0; 
    border-bottom-color: #c0c0c0; 
} 
.navbar-custom .navbar-nav > .open > a, 
.navbar-custom .navbar-nav > .open > a:hover, 
.navbar-custom .navbar-nav > .open > a:focus { 
    background-color: #14275d; 
    color: #c0c0c0; 
} 
.navbar-custom .navbar-nav > .open > a .caret, 
.navbar-custom .navbar-nav > .open > a:hover .caret, 
.navbar-custom .navbar-nav > .open > a:focus .caret { 
    border-top-color: #c0c0c0; 
    border-bottom-color: #c0c0c0; 
} 
.navbar-custom .navbar-nav > .dropdown > a .caret { 
    border-top-color: #ffffff; 
    border-bottom-color: #ffffff; 
} 
@media (max-width: 767px) { 
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a { 
     color: #ffffff; 
    } 
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover, 
    .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus { 
     color: #c0c0c0; 
     background-color: transparent; 
    } 
    .navbar-custom .navbar-nav .open .dropdown-menu > .active > a, 
    .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover, 
    .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus { 
     color: #c0c0c0; 
     background-color: #14275d; 
    } 
    .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a, 
    .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:hover, 
    .navbar-custom .navbar-nav .open .dropdown-menu > .disabled > a:focus { 
     color: #cccccc; 
     background-color: transparent; 
    } 
} 
.navbar-custom .navbar-link { 
    color: #ffffff; 
} 
.navbar-custom .navbar-link:hover { 
    color: #c0c0c0; 
} 

.navbar-brand-padding{ 
    padding: 15px 15px; 
} 


/* Nav bar drop-down #c1d100 is main BG Green, #fff is text-color, Text BG is #1a3278 blue */ 
.dropdown-menu { 
    background-color: #c1d100; 
} 

.dropdown-menu > li > a:hover, 
.dropdown-menu > li > a:focus { 
    color: #fff; 
    background-color: #1a3278 !important; 
} 

/* Remove border for navbar element*/ 
.navbar-custom .navbar-nav > li > a, 
.navbar-custom .navbar-nav > li:last-child > a { 
    border: none; 
} 

/* Change logo and navbar size when screen size below 768px */ 
@media only screen and (max-width: 768px) { 

    #logo-img img{ 
     width: 126px; 
     height: 30px; 
    } 

    .navbar-fixed-top{ 
     position: relative; 
    } 

    .navbar-fixed-top{ 
     margin-left: inherit; 
    } 
} 

@media only screen and (min-width: 768px) { 
    .navitem-margin{ 
     float: left; 
    } 

    .navbar-font-sz{ 
     font-size: 24px; 
     padding-right: 10px; 
    } 

    .navbar { 
     min-height:210px; 
    } 

    .logout-margin{ 
     margin-bottom: 50px; 
    } 

    .navbar-fixed-top{ 
     margin-left: 1200px; 
    } 
} 

Answer 1

Проблема заключается в старшинства порядке файлов. Загрузочный загрузчик загружается после его собственного стиля.

soluction рассматривает порядок загрузки или применить !important в правиле:

http://codepen.io/anon/pen/adaBZY?editors=1100

Answer 2

Bootstrap CSS является подменяют CSS. Лучший вариант - сделать ваш адрес более конкретным. Используйте ниже CSS Я просто добавил ул перед именем класса

ul.dropdown-menu { 
    background-color: #c1d100; 
} 

ul.dropdown-menu > li > a:hover, 
ul.dropdown-menu > li > a:focus { 
    color: #fff; 
    background-color: #1a3278; 
} 

Вы можете использовать !important тоже, но это не является разумным практика. Я избегаю использовать как можно больше !important.