How to get around child element in a UL issue

Question

I'm trying to Validate to HTML5 standards and have 1 error left which I can't get passed.

"Element section not allowed as child of element ul in this context." is the error, which I've found covered below and I know is a no-no. It works perfectly, it just doesn't validate.

Allowed child elements of ul

My question is how to I get around it? I'm trying to get a .js button to work within a Nav bar. I've tried every way I can think of to nest it and no luck. Either I lose the .css and it looks like a standard button and/or lose my positioning.

Here's the code. Thanks a lot!

<ul class="navlinks">
   <section>
    <li><a href="...">link1</a></li>
    <li><a href="...">link2</a></li>
    <li><button id="contactpanel">Contact</button></li>
  </section></ul>

.navlinks {

    border-left:orange solid 1px; 
margin-left:6%;
margin-top:10%;
    z-index: 6;
position:fixed;
font-size:1.1em;
font-family: 'Lato', sans-serif;
color:#18112D;
list-style:none;
font-weight:500;
padding-left:6px;
padding-top:20px;
padding-bottom:20px;
}

.navlinks > section {
outline: none;
}

.navlinks > section button {
border: none;
display: block;
width:100%;
cursor: pointer;
z-index:6;
font-size:1em;
font-family: 'Lato', sans-serif;
color:#18112D;
font-weight:500;
margin-left:-7px;
    outline: none;
background-color:transparent;
}

.navlinks > section button:hover {
color:#514966; 
opacity:0.3;
color:#18112D;
height:auto;
}

.navlinks > section button.active {
background-color: orange;
opacity:1;
color:white;
    outline: none;
    padding-right:18px;
}

Answer 1

Try getting rid of the <section> and targeting the button with this selector .navlinks li > button . See example codepen .

Answer 2

Just get rid of the <section> tags all together (or wrap the whole <ul> in it). It's not doing anything for you here anyway.

Then change .navlinks > section button to .navlinks button