Here is the code snippet that I have been working on recently:
Originally, I had an "hr" tag directly included in my code which worked perfectly but caused a site validation error. So, I made some changes to the code as shown below:
<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>After making these adjustments, the site validation error has been resolved. However, I am now facing an issue with the CSS animation for the sliding underline not working properly. I would appreciate any help or solutions you can provide.