Element ul not allowed as child of element ul (validation error)

Question

I keep getting a validation error, I tried to wrap the code in li tag but then it messes up the button tag?? is there a way to get it to work not sure where I'm going wrong is there any other tag to use instead of the button tag?

  <ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="coffee-origin.html">Origins of Coffee</a></li>

  <ul class="subnav">
        <button class="subnavbtn">More About Coffee ▾ </button>

            <ul class="subnav-content">
                <li><a href="coffee-types.html"> Coffee Types</a></li>
                <li><a href="coffee-prduction.html"> Production</a></li>
                <li><a href="further-resources.html"> Further Resources</a></li>
            </ul>

  </ul>

  </ul>
</nav>

Does [this](https://stackoverflow.com/questions/30913279/how-to-make-a-valid-li-link) help? — Rob Moll, Aug 16 '21 at 01:39
Why is there a button in he UL? The second UL should be in a LI, not as a child of the UL — epascarello, Aug 16 '21 at 01:43

score 1 · Answer 1 · answered Aug 16 '21 at 01:47

The proper HTML should be the second UL being inside of an li and the button inside of an li.

<nav>
  <ul class="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="coffee-origin.html">Origins of Coffee</a></li>
    <li><button class="subnavbtn">More About Coffee ▾ </button>
      <ul class="subnav-content">
        <li><a href="coffee-types.html"> Coffee Types</a></li>
        <li><a href="coffee-prduction.html"> Production</a></li>
        <li><a href="further-resources.html"> Further Resources</a></li>
      </ul>
    </li>
  </ul>
</nav>

score 0 · Answer 2 · answered Aug 16 '21 at 01:53

Use a drop-down in place of that shall be better

<div id="dropdown">
  <button onclick="showdrop()" id="dropbtn">More About Coffee ▾</button>
  <div id="dropdown-content" style="display:none;">
      <a href="coffee-types.html"> Coffee Types</a>
      <a href="coffee-prduction.html"> Production</a>
      <a href="further-resources.html"> Further Resources</a>
  </div>
</div>

And in javascript

function showdrop(){
 document.getElementById('dropdown-content').style.display="block";
 
}

Element ul not allowed as child of element ul (validation error)

2 Answers2