javascript - 如何解决 UL 问题中的子元素

Question

我正在尝试根据 HTML5 标准进行验证，但还剩下 1 个错误，我无法通过。

“在此上下文中，元素部分不允许作为元素 ul 的子元素。”是错误，我在下面发现了这个错误，我知道这是不行的。它运行完美，只是无法验证。

Allowed child elements of ul

我的问题是如何绕过它？我正在尝试让 .js 按钮在导航栏中工作。我已经尝试了所有我能想到的嵌套方法，但没有运气。要么我丢失了 .css 并且它看起来像一个标准按钮和/或丢失了我的定位。

这是代码。非常感谢!

<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

尝试去掉 <section>并使用此选择器定位按钮 .navlinks li > button .参见示例 codepen .