Соответствие фона кнопки фону списка

Question

Я хочу, чтобы цвет кнопки «Подключиться как» на панели навигации соответствовал остальному списку, но он всегда темнее

.dropdown{
     background-color:rgba(255,255,255,.4);
  }

ПОЛНЫЙ КОД ЗДЕСЬ

Answer 1

Попробуйте это

.dropbtn{
      color: #fff;
}
.dropbtn:hover {
      background-color: #000;
}

Answer 2

Поскольку кнопка 'Connect as' имеет объявленный класс 'dropbtn', она переопределит CSS 'color', который вы объявили в своем блоке CSS 'nav ul li a', из-за специфики CSS, поскольку класс имеет больший вес, чем тег элемента, попробуйте удалитьCSS свойство color в классе .dropbtn и добавьте его в '.dropbtn:hover', чтобы вызвать темный цвет текста только при наведении

.dropbtn:hover{
 color: black;
 background-color:#283fb8 
}

.dropbtn {
  background-color: transparent;
  padding: 16px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
 }

Некоторые заметки, по крайней мере, попробуйте разделить ваш CSS в егособственный файл и просто добавьте его по ссылке, это значительно облегчает отладку и позволяет увидеть проблему.Это также чище и способствует повторному использованию.Не знаю, смогу ли я ответить на ваши вопросы, но надеюсь, это поможет!

Answer 3

Из того, что я понял и прочитав ваш код, я думаю, что нашел исправление, которое вы искали. На моем конце это была строка 160 на CodePen:

.dropbtn: парить {цвет фона: #eee}

Причина, по которой цвета не совпадали, заключалась в том, что вы переопределили свой предыдущий код при наведении и, поскольку он был ниже в списке, он занял прецеденты. Чтобы исправить это, вы можете удалить код или изменить значение цвета на это:

.dropbtn: hover {background-color: # 000}