2015-12-18 6 views
3

Может ли кто-нибудь помочь мне узнать.Как изменить цвет фона меню выпадающего меню в bootstrap

Это мой код:

<div class="dropdown">//I used Bootstrap 
<button class="btn btn-primary dropdown-toggle" onClick="myFunction()" onMouseOver="showlinks()" type="button" data-toggle="dropdown" style="border-radius:15px 0px 15px 0px; background-color:transparent; border-color:grey">Menu     
<span class="caret"> 
    </span> 
    </button> 
    <ul class="dropdown-menu"> 
    <li><a href="#">Login</a></li> 
    <li><a href="#">Contact Us</a></li> 
    </ul> 
</div> 
+0

Не могли бы вы принять изменения request.Because ваш код не является полностью displayed.We может видеть только при нажатии на редактирование. – Raviteja

ответ

0

Если вы хотите быстро изменить попробовать это <ul class="dropdown-menu" style="background-color:#000000!important;" > и когда вы меняете фон вам нужно йо изменить цвет текста, так что если вам нужно после этого! Важный; добавьте этот цвет: #ffffff! important;

+1

Пожалуйста, никогда не используйте! Важно, это худшая практика когда-либо –

+0

@EnriqueQuero - я полностью согласен ... Я избегаю! Важно столько, сколько физически возможно ... –

+0

Так что нажмите ctrl + f и выпадающее меню типа вы найдете класс и отредактируйте его –

2

Во-первых, убедитесь, что ваш файл bootstrap.css ссылается на любой пользовательский файл CSS, который вы пишете. Затем вы можете переопределить стиль Bootstrap путем быть более конкретным и использование родительских/дочерних элементов, чтобы обеспечить ваш стиль переопределяет Bootstrap, то есть:

CSS:

.header .top-nav ul.dropdown-menu { 
    background-color: #000; 
} 

Fiddle: https://jsfiddle.net/mmcjLxsw/

EDIT : FYI - делая это таким образом, вы не должны использовать !important, который может стилировать стили элементов из каскадного потока макета документа.

0

Сотрите background-color:transparent в кнопке

HTML

<div class="dropdown"> 
     <button class="btn btn-primary dropdown-toggle" onClick="myFunction()" onMouseOver="showlinks()" type="button"ata-toggle="dropdown"style="border-radius:15px 0px 15px 0px; border-color:#fff">Menu     
    <span class="caret"> 
    </span> 
     </button> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Login</a></li> 
       <li><a href="#">Contact Us</a></li> 
      </ul> 
    </div> 

CSS

.dropdown ul li 
{ 
    background-color:#000; 
    } 

.btn-primary 
{ 
    color:#fff; 
} 
.btn-primary:hover 
{ 
    background:#003259; 
    color:#fff; 
} 
Смежные вопросы