Как удалить границу подменю из списка меню

Question

Я хочу удалить границу, которая есть у меня в подменю - «Просмотреть всех клиентов», «Добавить новых клиентов». Любая помощь могла бы быть полезна. На прилагаемом изображении есть меню и подменю, границу которых я хочу удалить https://i.stack.imgur.com/GKLgZ.png

.help-left-menu {
  list-style: none;
  margin-top: 36px;
  padding-left: 18px;
  overflow: auto;
}

.help-left-menu li {
  padding: 5px 8px;
  border-bottom: 1px solid #CCC;
  background: rgba(119, 140, 162, 1);
  text-decoration: none;
}

.help-left-menu li {
  list-style: none;
}

#dropdown-items {
  display: none;
  padding-left: 2px;
}

#dropdown-items a {
  color: white;
}

.menu {
  color: white;
}

.dropdown-list li a.active {
  background: darkslategray;
  border: 1px solid darkgray;
  padding: 10px;
}

.tab-content {
  display: none
}

.config-left {
  margin-top: 36px;
}

.content-heading {
  background-color: rgba(119, 140, 162, 1);
  padding-top: 5px;
  padding-bottom: 1px;
  color: white;
  align-content: center;
  text-align: center;
}

.features {
  padding-top: 4px;
  padding-bottom: 10px;
  color: white;
  padding-left: 0px;
  margin-left: 20px;
}

<ul class="help-left-menu">
  <li class="dropdown-list">
    <div class="features">
      <h5>FEATURES</h5>
    </div>
    <a href="#" data-toggle="dashboard-content" class="dashboard menu 
               tab">DASHBOARD<i class="dropdown-icon"></i></a>
  </li>
  <li class="dropdown-list"><a href="#" data-toggle="new-proposal- 
     content" class="newProposal menu tab">NEW PROPOSAL<i class="dropdown- 
     icon"></i></a></li>

  <li class="dropdown-list"><a href="#" data-toggle="proposal-content" class="proposal menu tab">PROPOSALS<i class="dropdown-icon"></i></a>
  </li>

  <li class="dropdown-list"><a href="#" data-toggle="client- 
           content" class="clients menu">CLIENTS<i class="dropdown-icon"></i>
        
                 <ul class="submenu" id="dropdown-items">
              <li><a href="#" data-toggle="view-all-client-content" 
           class="view-allClients submenu tab">View All Clients</a>
  </li>
  <li><a href="#" data-toggle="add-new-client-content" class="add- 
    newClient submenu tab">Add New Clients</a>
  </li>
</ul>

Answer 1

Используйте что-то вроде этого:

.help-left-menu li {
  border-bottom: 1px solid #CCC;
}

.submenu li {
  border: 0;
}

.submenu a {
  font-size: 40px;
  color: red;
  text-decoration: none;
}

<ul class="help-left-menu">
  <li class="dropdown-list">
    <div class="features">
      <h5>FEATURES</h5>
    </div>
    <a href="#" data-toggle="dashboard-content" class="dashboard menu 
               tab">DASHBOARD<i class="dropdown-icon"></i></a>
  </li>
  <li class="dropdown-list"><a href="#" data-toggle="new-proposal- 
     content" class="newProposal menu tab">NEW PROPOSAL<i class="dropdown- 
     icon"></i></a></li>

  <li class="dropdown-list"><a href="#" data-toggle="proposal-content" class="proposal menu tab">PROPOSALS<i class="dropdown-icon"></i></a>
  </li>
  <li class="dropdown-list"><a href="#" data-toggle="client- 
           content" class="clients menu">CLIENTS<i class="dropdown-icon"></i>
        
                 <ul class="submenu" id="dropdown-items">
              <li><a href="#" data-toggle="view-all-client-content" 
           class="view-allClients submenu tab">View All Clients</a>
  </li>
  <li><a href="#" data-toggle="add-new-client-content" class="add- 
    newClient submenu tab">Add New Clients</a>
  </li>
</ul>

Answer 2

Если вы использовали border: none в своем селекторе CSS, обязательно попробуйте добавить !important или добавить к нему более высокую специфичность на случай, если что-то имеет более высокую специфичность, чем он.