Choosing a submenu with CSS

Hey everyone! I'm currently in the process of designing a WordPress template for my personal website, and I require assistance with creating a dropdown multilevel menu. So far, I have successfully configured WordPress to display the first submenu level as "sub-menu" and the second level as "sub-sub-menu". However, I am struggling to target each individual sub-sub-menu separately. I attempted using :first-child or :nth-child(x), like this:

.sub-sub-menu:nth-child(2) { /*this targets both sub-sub-menus*/
    background: red;
}
.sub-sub-menu:nth-child(1) { /*but doesn't work*/
    background: red;
}

Unfortunately, neither of these methods proved successful. Below is the code generated by 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">
                  Sub-Subpage 1
                </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">
                  Sub-Subpage 2
                </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">
              Subpage 2
            </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">
                    Sub-Subpage 1
                </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>

You can access the JSFiddle link here.

htmlcsswordpress

Answer №1

If you want to target the initial .sub-sub-menu, you can achieve this with the following CSS:

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

Similarly, for the second one:

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

Check out the live demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS media queries with precise inequality restrictions

Imagine the following scenario: @media only screen and (max-width: 600px) { nav { display: none; } } @media only screen and (min-width: 601px) { nav { display: block; } } This setup can lead to undefined behavior for a wid ...

htmlcssmedia-queries

Issue with Bootstrap card collapsing and merging with other cards

I am using Bootstrap to design a grid of cards, but I am facing an issue where all the cards are merging together when I resize the screen. This issue occurred when I attempted to position the icons to appear at the top left of the card and the bottom midd ...

cssflexboxbootstrap-5

Is there a way to position the tooltip above the sorter icon in Ant Design (antd) component?

I'm currently working on creating a table with sorter columns using the antd framework. Can anyone guide me on how to position the tooltip above the sorter icon? Below is a snippet of my UI. https://i.sstatic.net/fGoqA.png Specifically, I included t ...

javascriptcssreactjsantd

What is the best way to enlarge a thumbnail using CSS?

Is there a way to resize an image without distortion? I am struggling with resizing a 70px thumbnail image to 200px X 165px while maintaining the aspect ratio. Currently, when I set the width to 200px and height to 165px, it stretches the image. Below is ...

htmlimagecss

Getting the Title value from Selenium in Python: A guide

Can someone provide guidance on how to retrieve the title value from this element using Selenium? I have tried the following code but it is returning an empty string. items = driver.find_elements_by_tag_name("li") for item in items: followe ...

pythonhtmlpython-3.xselenium

Exploring the integration of mixins from .scss files within node_modules into our .tsx or .jsx files for enhanced styling

I am currently facing a challenge with importing a .scss file from one of the installed node_modules into my .tsx file. The scss file contains a mixin named @mixin make-embedded-control($className: embedded-control){.....} which has all the necessary css ...

cssreactjssassscss-mixins

Steps for declaring CSS values with fallbacks in case of unsupported values

I'm looking to utilize the overflow: overlay property in Chrome, and overflow: scroll in Firefox. Simply declaring the overlay value causes Firefox not to scroll at all, even though I know it's not standard. My question is: what's the optim ...

javascriptcssfallback

Unable to show information within input field

I am attempting to present the value of my variable in a textBox using Jade, but I am encountering issues. I have tried the following options: value="#{startDate}" value="#{{startDate}}" value="{startDate}" value={{startDate}} I am aware that it is func ...

javascripthtmlpug

Utilizing the WebSocket readyState to showcase the connection status on the application header

I am currently in the process of developing a chat widget with svelte. I aim to indicate whether the websocket is connected or not by utilizing the websocket.readyState property, which has the following values: 0- Connecting, 1- Open, 2- Closing, 3- Close ...

javascripthtmlreactjstypescriptsvelte

The resource could not be loaded: net::ERR_FILE_NOT_FOUND error encountered when trying to load <img> tag

I attempted to insert an image using the 'img html tag' on my page (index.html). The image is located in the folder (imgs) within my project directory (Book_Store). Despite my efforts, I encountered this error message: Failed to load resource: ...

html

Iterating through the entire table presents a challenge when trying to display multiple values on a single element

I'm facing a challenge in dynamically adding data from an SQL Table to HTML. Here is my loop: @foreach (var item in Model.ModulesSubStages) { <div class="row"> <div class="col-md-6"><a id="courseRed ...

c#htmlcssasp.netrazor-pages

Show schedule in an HTML chart

I'm currently working with a table that displays the current status of a request. An example of how the table looks in HTML is shown below: https://i.sstatic.net/daDHy.png The table itself is quite simple, but I am having trouble figuring out how to ...

jqueryhtmlcss

connect a column from a separate array in pdfmake

In my current project, I am looking to link the values of an array that is different from the one present in the initial two columns. Is this achievable? (The number of partialPrice values aligns with the number of code entries). Despite several attempts ...

javascripthtmlangulartypescriptpdfmake

Incorporate a unique element onto your WordPress homepage

I'm seeking guidance on how to incorporate a custom feature (including a textbox and a button) onto my WordPress homepage. My goal is to create an area where users can input a code into a textbox. Here's the challenging part: Once the user click ...

phphtmlwordpress

Count in JavaScript that picks up where it left off

I'm working on setting up a countdown timer that runs for 24 hours, showing the days, hours, minutes, and seconds. The challenge I'm facing is how to save the progress of the countdown. Essentially, I want it to resume from where it left off for ...

javascripthtmlcookiescountercountdown

The method used in Redux does not function properly with my sessionStorage

I am currently in the process of learning about Redux. One of my goals is to implement a favorites feature using Redux. To achieve this, I have created actions such as addFavoriteSPORTSs, SPORTSReducer reducers, and have dispatched them in tab-demo.js whil ...

javascripthtmlreactjsreduxmaterial-ui

Hover over me to see the CSS animation translate upwards until it reaches a specific point

I am new to CSS animation and I am trying to create a circle that moves from one end to the other on hover. However, I am facing an issue where the circle goes off-screen when the browser size is changed. How can I make it stop at a certain point within th ...

htmlcssanimationhovertranslate

What could be causing the .text method to not retrieve text even when it is present?

Currently experimenting with web scraping using Selenium to extract the color of a particular dress. Despite finding the text content under the 'screen-reader-text' class when inspecting the website, my attempts at fetching it result in an empty ...

javascriptpythonhtmlseleniumweb-scraping

Invisible style date input value on iPhone mobile devices

My goal is to enhance the appearance of an HTML5 input with a custom icon, using a font pack. Although I mention FontAwesome in this example, in reality, I'm utilizing a different custom font pack. On my mobile device (iPhone X), I can see the calend ...

htmlcss

Using jQuery to smoothly animate scrolling to the top of a

How can I create a "scroll to top" button at the bottom of my page that smoothly scrolls to the top? Despite using an "animate({scrollTop})" script, the scroll animation is not working and it jumps directly to the top. This is the script I am using: $(&a ...

jqueryhtmlanimation