我最近的代码如下：
现在我的问题在于＆＃34; hr＆＃34;直接标记它工作得很好，但给出了网站验证错误。所以我改变了我的代码如下。 ：
<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>
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;}<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>
现在它没有给出网站验证错误但我的滑动下划线的css动画无法正常工作。所以请给我解决方案。
答案 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;}