如何從菜單列表中刪除子菜單邊框

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

如果您在 CSS 選擇器中使用了border: none ，請確保嘗試添加!important或為其添加更高的特異性，以防有任何比它更高的特異性。

Answer 2

使用這樣的東西：

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