CSS選擇子菜單

大家好！我正在爲我自己的網站創建一個wordpress模板，我需要一個下拉多級菜單。我管理wordpress輸出第一個子菜單級別作爲「子菜單」，第二個子菜單作爲「子子菜單」。但我需要分別訪問每個子子菜單。我試過：第一胎或：第n個孩子（X），在以下方面：CSS選擇子菜單

.sub-sub-menu:nth-child(2) { /*selects both sub-sub-menus*/ 
    background: red; 
} 
.sub-sub-menu:nth-child(1) { /*doesnt work*/ 
    background: red; 
}

但它們也都沒有奏效。這裏是我的WordPress生成的代碼：

<section id="menu"> 
    <div id="menu_container" class="menu-header_menu-container"> 
    <ul id="menu-header_menu" class="menu"> 
     <li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-26"> 
     <a href="http://localhost/wordpress"> 
      Home 
     </a> 
     </li> 
     <li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-162"> 
     <a href="http://localhost/wordpress/?page_id=136"> 
      Page 1 
     </a> 
     <ul class="sub-menu"> 
      <li id="menu-item-193" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-193"> 
      <a href="http://localhost/wordpress/?page_id=192"> 
       subpage 1 
      </a> 
      <ul class="sub-sub-menu"> 
       <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200"> 
       <a href="http://localhost/wordpress/?page_id=196"> 
        subsubpage1 
       </a> 
       </li> 
       <li id="menu-item-209" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-209"> 
       <a href="http://localhost/wordpress/?page_id=204"> 
        subsubpage2 
       </a> 
       </li> 
      </ul> 
      </li> 
      <li id="menu-item-188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-188"> 
      <a href="http://localhost/wordpress/?page_id=187"> 
       subapge2 
      </a> 
      <ul class="sub-sub-menu"> 
       <li id="menu-item-217" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-217"> 
       <a href="http://localhost/wordpress/?page_id=214"> 
        subsubpage1 
       </a> 
       </li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
     <li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"> 
     <a href="http://localhost/wordpress/?page_id=138"> 
     Page 2 
     </a> 
     </li> 
     <li id="menu-item-168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-168"> 
     <a href="http://localhost/wordpress/?page_id=167"> 
      Page 3 
     </a> 
     </li> 
     <li id="menu-item-172" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-172"> 
     <a href="http://localhost/wordpress/?page_id=171"> 
      Page 4 
     </a> 
     </li> 
    </ul> 
    </div> 
</section>

鏈接jsfiddle

來源

2013-11-23 sveatlo

要定位第一.sub-sub-menu你可以使用：

.sub-menu .menu-item:nth-child(1) .sub-sub-menu { 
    background: red; 
}

而對於第二：

.sub-menu .menu-item:nth-child(2) .sub-sub-menu { 
    background: red; 
}

Demo

來源

2013-11-23 17:00:12 user3142418

非常感謝，這工作。 – sveatlo

CSS選擇子菜單

回答

相關問題