在此上下文中,元素hr不允许作为元素ul的子元素。 (抑制此子树中的更多错误。)

时间:2015-04-10 10:20:00

标签: html css3

我最近的代码如下:

现在我的问题在于" hr"直接标记它工作得很好,但给出了网站验证错误。所以我改变了我的代码如下。 :



<nav>
            <ul>
							<li id="one"><a href="#HOME" id="a" class="active">HOME</a></li>
                            <li id="two"><a href="#ABOUT" id="b">ABOUT</a></li>
							<li id="three"><a href="#SERVICE" id="c">SERVICE</a></li>
							<li id="four"><a href="#COLLECTIONS" id="d">COLLECTION</a></li>
							<li id="five"><a href="#CONTACT" id="e">CONTACT</a></li>
                          
            <hr/>               
			</ul>
            </nav>
&#13;
&#13;
&#13;

&#13;
&#13;
body{background:#CCCCCC;}
    nav{width:100%;margin:0 10px;padding: 38px 0;}
    nav li{padding:0;}
    nav ul li{display: inline;text-align: center;}
    nav a{display: inline-block;width: 15%;padding: .75rem 0;margin: 0;text-decoration: none;font-family:'leelawadeeregular';font-size: 18px;					      color:#e81b64;}
    #one a:hover,.active,#two a:hover,#three a:hover,#four a:hover,#five a:hover{color:#ffffff;}
    #two:hover ~ hr {margin-left:18%;text-decoration:underline;}
    #three:hover ~ hr {margin-left:33.5%;text-decoration:underline;}
    #four:hover ~ hr {margin-left:48.5%;text-decoration:underline;}
    #five:hover ~ hr {margin-left:64%;text-decoration:underline;}
    nav hr {height: .25rem;width:10%;margin:0px 0px;background:#e81b64;border: none;transition: .3s ease-in-out;}
&#13;
<nav>
                <ul>
    							<li id="one"><a href="#HOME" id="a" class="active">HOME</a></li>
                                <li id="two"><a href="#ABOUT" id="b">ABOUT</a></li>
    							<li id="three"><a href="#SERVICE" id="c">SERVICE</a></li>
    							<li id="four"><a href="#COLLECTIONS" id="d">COLLECTION</a></li>
    							<li id="five"><a href="#CONTACT" id="e">CONTACT</a></li>
                              
               <li> <hr/></li>
    			</ul>
                </nav>
&#13;
&#13;
&#13;

现在它没有给出网站验证错误但我的滑动下划线的css动画无法正常工作。所以请给我解决方案。

1 个答案:

答案 0 :(得分:0)

是的,您需要在css中添加li:

    #two:hover ~ li hr {margin-left:18%;text-decoration:underline;}
    #three:hover ~ li hr {margin-left:33.5%;text-decoration:underline;}
    #four:hover ~ li hr {margin-left:48.5%;text-decoration:underline;}
    #five:hover ~ li hr {margin-left:64%;text-decoration:underline;}