如何为大孩子sibebar菜单添加背景颜色?

时间:2018-10-24 15:00:27

标签: css wordpress

我正在使用高级边栏菜单页面。链接如下:

https://wordpress.org/plugins/advanced-sidebar-menu/

该插件提供的小部件可让用户向子菜单添加背景以及文本颜色。

但是,它没有提供为子菜单添加背景颜色的选项。

在下面的示例代码中,我们能够为称为“购买”的子菜单添加背景色。

但是,我们在确定如何为孙子在线内容和热门商品添加背景颜色时遇到问题。

有人知道如何处理吗?

我们不想使用原始代码,因为对插件进行更新会清除所有这些代码。

下面的示例代码显示了侧边栏菜单使用的类。

<div id="advanced_sidebar_menu-8-wrap" data-js="advanced_sidebar_menu-8-wrap">
   <ul class="child-sidebar-menu">
      <li class="page_item page-item-2867 page_item_has_children current_page_item has_children"><a href="http://departments/?page_id=2867">Purchasing</a>
        <ul class="children">
      <li class="page_item page-item-5125 page_item_has_children has_children"><a href="http://departments/?page_id=5125">Online Content</a>
        <ul class="children">
        <li class="page_item page-item-2895"><a href="http://departments/?page_id=2895">division Descriptions</a></li>
        <li class="page_item page-item-2911"><a href="http://departments/?page_id=2911">Oracle</a></li>
        <li class="page_item page-item-2917"><a href="http://departments/?page_id=2917">Contracts</a></li>
        <li class="page_item page-item-5110"><a href="http://departments/wp-content/uploads/2018/10/2018.pdf" target="_blank">Certified</a></li>
        <li class="page_item page-item-2927"><a href="http://departments/?page_id=2927">Policies / Procedures</a></li>
        <li class="page_item page-item-2960"><a href="http://departments/?page_id=2960">Forms</a></li>
        <li class="page_item page-item-2936"><a href="http://departments/?page_id=2936">Special Notices</a></li>
        <li class="page_item page-item-2943"><a href="http://departments/?page_id=2943">FAQ</a></li>
        <li class="page_item page-item-5118"><a href="http://departments/?page_id=5118">Online Client Items</a></li>
         </ul>
       </li>
       <li class="page_item page-item-5123 page_item_has_children has_children"><a href="#">Hot Items</a>
         <ul class="children">
        <li class="page_item page-item-3460"><a href="http://departments/purchasing/pdf/PurchasingRestricted.pdf" target="_blank">Purchasing Restricted Item Policy</a></li>
        <li class="page_item page-item-5120"><a href="http://departments/purchasing/oracle_pdf/UpgradeAwareness.pdf" target="_blank">DeKalb 11.5.10.2 Upgrade Awareness Documentation</a></li>
         </ul>
           </li>
         </ul>
        </li>
       </ul><!-- End .child-sidebar-menu -->
     </div>

这是我们到目前为止尝试过的:

#advanced_sidebar_menu-8-wrap .child-sidebar-menu .page_item page-item-2867 .page_item_has_children .current_page_item has_children .children .page_item .page-item-5125 .page_item_has_children .has_children li a {
    background-color: #009B32 !important;
}

1 个答案:

答案 0 :(得分:0)

我认为就足够了。

#advanced_sidebar_menu-8-wrap .page_item.has_children .page_item.has_children > a {
  background-color: #035;
}
<div id="advanced_sidebar_menu-8-wrap" data-js="advanced_sidebar_menu-8-wrap">
  <ul class="child-sidebar-menu">
    <li class="page_item page-item-2867 page_item_has_children current_page_item has_children"><a href="http://departments/?page_id=2867">Purchasing</a>
      <ul class="children">
        <li class="page_item page-item-5125 page_item_has_children has_children"><a href="http://departments/?page_id=5125">Online Content</a>
          <ul class="children">
            <li class="page_item page-item-2895"><a href="http://departments/?page_id=2895">division Descriptions</a></li>
            <li class="page_item page-item-2911"><a href="http://departments/?page_id=2911">Oracle</a></li>
            <li class="page_item page-item-2917"><a href="http://departments/?page_id=2917">Contracts</a></li>
            <li class="page_item page-item-5110"><a href="http://departments/wp-content/uploads/2018/10/2018.pdf" target="_blank">Certified</a></li>
            <li class="page_item page-item-2927"><a href="http://departments/?page_id=2927">Policies / Procedures</a></li>
            <li class="page_item page-item-2960"><a href="http://departments/?page_id=2960">Forms</a></li>
            <li class="page_item page-item-2936"><a href="http://departments/?page_id=2936">Special Notices</a></li>
            <li class="page_item page-item-2943"><a href="http://departments/?page_id=2943">FAQ</a></li>
            <li class="page_item page-item-5118"><a href="http://departments/?page_id=5118">Online Client Items</a></li>
          </ul>
        </li>
        <li class="page_item page-item-5123 page_item_has_children has_children"><a href="#">Hot Items</a>
          <ul class="children">
            <li class="page_item page-item-3460"><a href="http://departments/purchasing/pdf/PurchasingRestricted.pdf" target="_blank">Purchasing Restricted Item Policy</a></li>
            <li class="page_item page-item-5120"><a href="http://departments/purchasing/oracle_pdf/UpgradeAwareness.pdf" target="_blank">DeKalb 11.5.10.2 Upgrade Awareness Documentation</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
  <!-- End .child-sidebar-menu -->
</div>