[英]Anchor element is adding <li> elements to its child <ul>
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.
然后,有一个不需要的li元素添加到嵌套在该元素内部的无序列表的开头,还有一个黄色框添加到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/ 我一直在寻找原因很长时间,没有任何结果,这是JSFiddle(请全屏查看): https ://jsfiddle.net/omw40pLn/1/
HTML: 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 <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. 我没有添加CSS,因为它太长了,请在JSFiddle中查看。
your HTML is invalid, you can have only li
(and script supporting elements) as direct child of ul
您的HTML无效,您只能将
li
(和脚本支持元素)作为ul
直接子级
4.4.6 The
ul
element4.4.6
ul
元素Content model:
内容模型:
Zero or more
li
and script-supporting elements.零个或多个
li
和脚本支持元素。
where script-supporting elements are: 脚本支持元素为:
script
, template
script
, template
put a
and input
out of the ul
把
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 <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>
you also have a </a>
that is missing, here: 您还缺少一个
</a>
,这里:
<a class="mainNavItemChild" href="#">More <i style="font-size:80%;" class="fa fa-chevron-down"></i>
This is wrong: 这是错误的:
<ul id="mainNav">
<a href="#" id="logo"><h1>GoBold</h1></a>
a list cannot contain anything OTHER than <li>
tags. 列表中不能包含
<li>
标记以外的任何内容。 Since your html is invalid, you're getting your browser's best-effort to correct/compensate for your mistakes. 由于您的html无效,因此您将尽最大努力纠正/补偿您的错误。
Its happening because there is an incomplete anchor tag in that li element. 发生这种情况是因为该li元素中的锚标记不完整。
<li class="mainNavItem"><a class="mainNavItemChild" href="#">More </a></li>
Here is the working jsFiddle 这是工作的jsFiddle
Hope it works for you :) 希望这对你有用 :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.