我想删除子菜单下的边框--"查看所有客户"、"添加新客户"。附上的图片是我想去除边框的菜单和子菜单。 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>
使用类似这样的东西。
.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>
如果你用过 border: none
在你的CSS选择器中,请务必尝试添加 !important
或者在它的基础上增加更高的特异性,以防任何东西比它有更高的特异性。