Anchor element is adding <li> elements to its child <ul>

Question

As you can see, when you hover over "more" a dropdown appears, inside that dropdown every list item has a background-color of green. Then, there is an unwanted li element added to the beginning of the unordered list that is nested inside the element, there is also a yellow sort of box added to the top of my ul.

I have been searching for the cause for quite long with no results, here's the JSFiddle (please view in full screen): 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>

I didn't add the CSS because it's too long, view it in JSFiddle.

Answer 1

Problem + explanation

your HTML is invalid, you can have only li (and script supporting elements) as direct child of ul

see W3C specs:

4.4.6 The ul element

Content model:

Zero or more li and script-supporting elements.

where script-supporting elements are:

script , template

---

Solution

put a and input out of the 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> 

Note

you also have a </a> that is missing, here:

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

Answer 2

This is wrong:

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

a list cannot contain anything OTHER than <li> tags. Since your html is invalid, you're getting your browser's best-effort to correct/compensate for your mistakes.

Answer 3

Its happening because there is an incomplete anchor tag in that li element.

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

Here is the working jsFiddle

Hope it works for you :)