如何删除菜单列表中的子菜单边框?

问题描述 投票:0回答:1

我想删除子菜单下的边框--"查看所有客户"、"添加新客户"。附上的图片是我想去除边框的菜单和子菜单。 https:/i.stack.imgur.comGKLgZ.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>
html css
1个回答
0
投票

使用类似这样的东西。

.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>

0
投票

如果你用过 border: none 在你的CSS选择器中,请务必尝试添加 !important 或者在它的基础上增加更高的特异性,以防任何东西比它有更高的特异性。

© www.soinside.com 2019 - 2024. All rights reserved.