html - anchor 元素正在将 <li> 元素添加到其子元素 <ul>

Question

如您所见，当您将鼠标悬停在“更多”上时，会出现一个下拉菜单，在该下拉菜单中，每个列表项的背景色都是绿色。然后，在元素内部嵌套的无序列表的开头添加了一个不需要的 li 元素，在我的 ul 顶部添加了一个黄色的框。

我一直在寻找原因很长时间都没有结果，这是 JSFiddle(请全屏查看):https://jsfiddle.net/omw40pLn/1/

HTML:

<ul id="mainNav">
<a href="#" id="logo"><h1>GoBold</h1></a>

<li class="mainNavItem"><a class="mainNavItemChild" href="#">Home</a></li>
<li class="mainNavItem"><a class="mainNavItemChild"  href="#">Contact</a></li>
<li class="mainNavItem"><a class="mainNavItemChild"  href="#">About</a></li>
<li class="mainNavItem"><a class="mainNavItemChild"  href="#">More&nbsp;&nbsp;<i style="font-size:80%;" class="fa fa-chevron-down"></i>
<ul id="dropdown">
<li class="dropdownItem"><a href="#">Home</a></li>
<li class="dropdownItem"><a href="#">Contact</a></li>
<li class="dropdownItem"><a href="#">About</a></li>
<li class="dropdownItem"><a href="#">More</a></li>
</ul>
</a>

</li>

<input id="searchInput" type="text" placeholder="Search Here..."/>

</ul>

<div id="replaceIt">
</div>

CSS 太长，我没有添加，在 JSFiddle 中查看。

Answer 1

问题+解释

您的 HTML 无效，您只能有 li (和脚本支持元素)作为 ul 的直接子元素

see W3C specs:

4.4.6 The ul element

Content model:

Zero or more li and script-supporting elements.

脚本支持元素是:

script , template

---

解决方案

放a和 input来自 ul

@font-face {
  font-family: gobold;
  src: url(gobold.ttf);
}
html {
  width: 100%;
  height: 100%
}
body {
  width: 100%;
  height: 100%;
  margin: 0;
}
#mainNav {
  background: -webkit-linear-gradient(bottom, #080812 10%, #101029 60%);
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 10%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.mainNavItem:nth-child(2) {
  margin-left: 15%;
}
.mainNavItem {
  float: left;
  font-family: verdana;
  font-size: 90%;
  position: relative;
  margin-left: 20px;
}
.mainNavItemChild {
  display: inline-block;
  color: white;
  text-decoration: none;
  text-align: center;
  padding: 25px 0;
  width: 100px;
  position: relative;
  background-color: yellow;
}
.mainNavItemChild:visited {
  color: none;
  text-decoration: none;
  background-color: none;
}
.mainNavItemChild:hover {
  background-color: #0f0f21;
}
.mainNavItem:nth-child(5):hover #dropdown {
  opacity: 1;
  z-index: 999;
  -webkit-transition: all .4s ease-out;
}
.mainNavItem:last-child:hover #replaceIt {
  z-index: 0;
}
#dropdown {
  background: -webkit-linear-gradient(bottom, #080812, #101029);
  list-style: none;
  position: relative;
  top: 0;
  width: 220%;
  border-top: 1px solid #1d1c48;
  opacity: 0;
  margin: 0;
  padding: 0;
  z-index: 0;
  -webkit-transition: all .4s ease-out .3s;
}
.dropdownItem a {
  color: white;
  display: inline-block;
  text-indent: 25px;
  padding: 20px 0;
  padding-left: 0;
  width: 100%;
  text-decoration: none;
  background-color: red;
}
.dropdownItem a:hover {
  background-color: #080813;
}
#replaceIt {
  width: 16.1%;
  height: 230px;
  font-size: 30px;
  position: absolute;
  top: 67px;
  left: 565px;
}
#logo {
  text-decoration: none;
}
#logo h1 {
  display: inline-block;
  color: white;
  font-family: gobold;
  margin: 0;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translate(0, -50%);
  text-shadow: 2px -2px 0 black;
}
#searchInput {
  background: url(search.png) 10px 50% no-repeat;
  text-indent: 30px;
  background-size: 10%;
  background-color: white;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 50px;
  transform: translate(0, -50%);
  border: none;
  border: 1px solid #212122;
  padding: 4px;
  border-radius: 9px;
  -webkit-transition: all .5s ease-out;
}
#searchInput:focus {
  background-position: 95%;
  text-indent: 5px;
  outline: none;
}

<a href="#" id="logo"><h1>GoBold</h1></a>
<ul id="mainNav">


  <li class="mainNavItem"><a class="mainNavItemChild" href="#">Home</a>
  </li>
  <li class="mainNavItem"><a class="mainNavItemChild" href="#">Contact</a>
  </li>
  <li class="mainNavItem"><a class="mainNavItemChild" href="#">About</a>
  </li>
  <li class="mainNavItem"><a class="mainNavItemChild" href="#">More&nbsp;&nbsp;<i style="font-size:80%;" class="fa fa-chevron-down"></i></a>
    <ul id="dropdown">
      <li class="dropdownItem"><a href="#">Home</a>
      </li>
      <li class="dropdownItem"><a href="#">Contact</a>
      </li>
      <li class="dropdownItem"><a href="#">About</a>
      </li>
      <li class="dropdownItem"><a href="#">More</a>
      </li>
    </ul>

  </li>


</ul>

<input id="searchInput" type="text" placeholder="Search Here..." />

<div id="replaceIt">
</div>

注意事项

你还有一个</a>缺少的，在这里:

<a class="mainNavItemChild" href="#">More&nbsp;&nbsp;<i style="font-size:80%;" class="fa fa-chevron-down"></i>