Как изменить стиль границы выпадающего меню Semanti c UI?

Question

Я использую Semanti c UI для раскрывающегося списка, и я включил только раскрывающиеся и переходные части Semanti c. Мне нужно изменить границу элементов в моем раскрывающемся списке, но дело в том, что кроме первого элемента, остальные элементы имеют жирные границы. Я установил для border-bottom-width значение 0, чтобы граница была только с трех сторон и все было единообразно, но это не работает. обрезается из-за переключателя навигации. (Панель навигации состоит из Bootstrap 4.)

Это CSS, который я использовал для раскрывающегося и раскрывающегося списка.

.item{
  border-color: #812485 !important;
  border-bottom-width: 0px !important;
  border-width: 1px !important;
  color: #3F72AF !important;
  border-style: solid !important;
}
 .navbar{
    background-color: #3F72AF;
    border-radius:  0 0 85% 85% / 30%;
  }

Вот код https://codepen.io/arnab4srk/pen/qBOoqre

Answer 1

Как я вижу, вы пытаетесь сделать границу semanti c со всех трех сторон, поэтому вы можете сделать это вот так, все, что вам нужно сделать, это убедиться, что ваш you CSS работает, проверив его положение в ваш код

.navbar{
    background-color: #3F72AF;
    border-radius:  0 0 85% 85% / 30%;
  }

.ui.dropdown .menu>.item {
  border: 1px solid #3F72AF !Important;
  border-top: 0 !important;
}
.ui.dropdown .menu>.item:first-child {
 border-top: 1px solid #3F72AF !Important;
}

Это ваше решение, но я бы посоветовал вам оставить его в таком виде, он будет намного лучше.

.navbar{
    background-color: #3F72AF;
    border-radius:  0 0 85% 85% / 30%;
  }

.ui.dropdown .menu>.item {
  border-bottom: 1px solid #3F72AF !Important;
}
.ui.dropdown .menu>.item:last-child {
 border-bottom: 0 !Important;
}

Answer 2

В приведенном выше коде вы удаляете border-bottom-width, а затем снова добавляете его с помощью border-width: 1px;.

Чтобы удалить границы из раскрывающегося списка, просто используйте:

.item{
  border: none !important;
  color: #3F72AF !important;
}