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 ul元素

     

内容模型：

     

零个或多个li和支持脚本的元素。

支持脚本的元素是：

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>

Answer 2

这是错误的：

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

列表不能包含<li>个标记以外的任何内容。由于您的HTML无效，因此您的浏览器会尽最大努力纠正/弥补您的错误。

Answer 3

它的发生是因为该li元素中存在不完整的锚标记。

<li class="mainNavItem"><a class="mainNavItemChild" href="#">More&nbsp;&nbsp;</a></li>

以下是working jsFiddle

希望它适合你：）