[英]CSS select sub-menu
everybody! 大家好! I'm creating a wordpress template for my own website and I need a dropdown multilevel menu. 我正在为自己的网站创建一个wordpress模板,并且需要一个下拉多层菜单。 I've managed wordpress to output the first submenu level as "sub-menu" and the second as "sub-sub-menu". 我管理过wordpress,将第一个子菜单级别输出为“子菜单”,将第二个子菜单级别输出为“子子菜单”。 But I need to access each of the sub-sub-menus individually. 但是我需要分别访问每个子菜单。 I tried the :first-child or :nth-child(x), in following context: 我在以下情况下尝试了:first-child或:nth-child(x):
.sub-sub-menu:nth-child(2) { /*selects both sub-sub-menus*/
background: red;
}
.sub-sub-menu:nth-child(1) { /*doesnt work*/
background: red;
}
But neither one of them worked. 但是他们两个都没有工作。 Here is my wordpress-generated code: 这是我的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.