What could be causing the nested HTML list to malfunction?

Can you take a look at the code below and help me identify what's wrong? I'm trying to organize Add Result and Manage Result under Result. Additionally, Add1 Result and Add2 Result should be nested under Add Result, creating a hierarchy. However, my current code doesn't seem to be working as expected. Any suggestions?

<li class="has-children">
  <a href="#"> <span>Result</span> </a>
  <ul class="child-nav">
    <li class="has-children">
      <a href="add-result.php"><span>Add Result</span></a>
      <ul class="child-nav">
        <li>
          <a href="add1-results.php"> <span>Add1 Result</span></a>
        </li>
        <li>
          <a href="add2-results.php"> <span>Add2 Result</span></a>
        </li>
      </ul>
    </li>
    <li>
      <a href="manage-results.php"> <span>Manage Result</span></a>
    </li>
  </ul>
</li>

Answer №1

Your code looks good overall, but there is a small issue with the placement of your first li element. It should be nested inside an ol or ul element, as noted in the documentation.

<ul>
  <li class="has-children">
    <a href="#"> <span>Result</span> </a>
    <ul class="child-nav">
      <li class="has-children">
        <a href="add-result.php"><span>Add Result</span></a>
        <ul class="child-nav">
          <li>
            <a href="add1-results.php"> <span>Add1 Result</span></a>
          </li>
          <li>
            <a href="add2-results.php"> <span>Add2 Result</span></a>
          </li>
        </ul>
      </li>
      <li>
        <a href="manage-results.php"> <span>Manage Result</span></a>
      </li>
    </ul>
  </li>
</ul>

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

Customize your Bootstrap 4 navbar to align on the right with a button that remains visible on mobile devices

I'm working on setting up a navbar with three elements. I want to have a left-aligned brand, a group of right-aligned links that will collapse on smaller screens, and an additional button that stays visible at all times. To achieve the alignment of t ...

Is there a way to display an asterisk within a select2 dropdown to signify that a field is mandatory?

I'm facing an issue with the Select2 plugin in my form. While all fields are required and marked by an asterisk when empty, the Select2 dropdown ignores this validation attribute. Therefore, I am wondering: Is there a way to display an asterisk image ...

When adjusting the size of the browser window, the div on my web page shifts to the bottom, creating a large empty space at

I have encountered an issue where, when I resize the browser window, my div moves to the bottom and leaves a large space at the top. I would like the div to remain in the center of the page, even if I resize the window to be smaller than the size of the ...

Error message displaying invalid property value for color in Bootstrap 4 :root

Attempting to utilize the bootstrap 4 :Root color property led to an error indicating that the value was invalid. Searching through the bootstrap documentation yielded no helpful information on this topic. Seeking assistance on how to properly use the bo ...

"Concealing a section of my website with PHP: A step-by-step guide

On our website, there is a member database with access levels assigned to each member. We are looking to create a functionality where if the member's access level is greater than or equal to 10, a specific CSS class will become visible. Conversely, if ...

Exploring the use of Shadow DOM in ContentEditable for securing text segments

I have recently been working on creating a basic text editor using ContentEditable. The main requirement for the application is to allow users to insert blocks of text that are protected from typical editing actions. These protected text blocks should not ...

How can we avoid re-rendering the same component repeatedly when using React Router v6?

As a beginner in react, I'm facing an issue with preventing components from re-rendering when navigating to a different page. Specifically, I want to display only text on my Signup and Login pages, but the Navbar keeps re-rendering every time I switch ...

Facing issues with converting SVG to PDF in Rails 5.0

Below you will find two images: the first one is displayed in a browser view, while the second one shows a PDF view. The issue lies with the SVG to PDF conversion. I have dynamically set the stroke-dashoffset value, which works correctly in the browser bu ...

The first generation iPad, CSS3 transformations, and the constraints on image processing due to limited RAM

During my exploration of the original iPad on iOS 5.0.1, I stumbled upon some peculiar quirks that appear to be linked to the number of images being loaded into the browser simultaneously. I noticed certain things rendering at half resolution or even lowe ...

Creating a vertical slider with an unordered list

Looking to create a vertical menu with a fixed height that smoothly slides up and down when the arrow buttons are clicked. I'm struggling to figure out how to properly use offsets to determine where to navigate to. Right now, I am using the relative ...

The jQuery modal window is not appearing when trying to fade in

I want to set up a feedback form where all fields are filled out and the user has clicked the checkbox confirming they are not a robot. Once this is done, the Send button becomes active and a popup window will appear with a message saying "Thank you, we wi ...

Adding external stylesheets or libraries in Express is a simple process that can greatly

Currently, I am in the process of developing a todo application using the express framework on a node server. The starting point for my application is an index.ejs file located in the same folder as my jquery.min.js file. However, when I attempt to include ...

I am having trouble styling a pre-existing class in bootstrap using my custom CSS file

html <section id="title"> <div class="container-fluid"> <!-- Nav Bar --> <nav class="navbar navbar-expand-lg navbar-dark"> <a class=" navbar-brand">tindog</a> ...

Retrieving player statistics through the NHL API

I've been struggling for the past two weeks to figure out how to fetch player stats from this NHL API when a player is clicked. You can see an example of what I'm trying to achieve by clicking on this player stats link. Any assistance with this w ...

Adjusting the "chosen" setting through PHP

I am working on a simple form, and one of the requirements is to validate the values on submit. If the values are valid, they should remain unchanged. But for some reason, only the last option in the list is being set as selected, even if a different opt ...

Troubleshooting: jQuery click event not functioning correctly with if-else statement

For some reason, I can't seem to figure out how to toggle the color of all list items with a class of "link" between blue and black. I've searched through numerous posts but still can't find a solution. Working Example: http://jsfiddle.net/ ...

Close the popover when clicked elsewhere

My code for creating a popover in HTML is shown below: <a data-placement="bottom" style="float:right;margin-right:20px;" id="new-quote-popover" popover><img src="img/user.png"/>&nbsp;<b>{{UserName}}</b> <div id="popover- ...

Adjusting the color of text upon selection, ideally using CSS styling

::selection { background: #000000; opacity: 0 } ::-moz-selection { background: #000000; opacity: 0 } I am struggling with setting the color of selected text on my website to be pure black, however, since my text is already black, it gets hidden by the sel ...

Struggling to make an AJAX form function properly

I'm running into an issue while setting up a basic AJAX form. My goal is to have a message display on the same page upon successful login using a PHP form through AJAX, but currently, I get redirected to the PHP file after form submission. Can anyone ...

Why doesn't the background color display properly when the div height is set to auto?

When I set the height of #container to auto, the background-color does not display. However, when I set it to a fixed height like 1000px, it shows up. I've attempted using "overflow:auto", but that did not solve the issue. How can I fix this? I want # ...