Anchor element is adding
elements to its child

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.

what's with the `` by itself after the `` that closes `.id="dropdown"`? There's no match `` opener for it.if you ahve invalid html, then don't be surprise if the browser parse produces a weird dom tree while compensating for the errors. — Marc B, Jul 08 '16 at 17:37
See [Permitted Content for `
` elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul) — showdev, Jul 08 '16 at 17:38
i am nesting the #dropdown inside the anchor, and then closing the anchor. — doubleOrt, Jul 08 '16 at 18:30

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

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>

score 0 · Answer 2 · answered Jul 08 '16 at 17:38

0

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.

answered Jul 08 '16 at 17:38

Marc B

356,200
43
426
500

run your html through a validator and fix all the errors it finds. – Marc B Jul 08 '16 at 18:29
"End tag a violates nesting rules." What is the violated rule ? – doubleOrt Jul 08 '16 at 18:34

score 0 · Answer 3 · answered Jul 08 '16 at 17:40

0

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 :)

answered Jul 08 '16 at 17:40

Arun AK

4,353
2
23
46

is a block element tag, and is an inline element tag - and block element tags should never go inside inline element tags, only the other way around (or inline element tags inside other inline element tags). http://stackoverflow.com/a/10946044/4913153 – Arun AK Jul 08 '16 at 18:37
but i've set the anchor's display property to inline-block ? – doubleOrt Jul 08 '16 at 18:50

Anchor element is adding elements to its child

3 Answers3

Problem + explanation

Solution

Note

Anchor element is adding
elements to its child