錨元素正在添加 <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直接子級

請參閱W3C規格：

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>

這是工作的jsFiddle

希望這對你有用 ：）