LI element underline is not removing in html-CodePudding

I created a basic navbar which include some li elements. I want remove the underline decoration from the li element. i applied textdecoration:none; styling for the li. But it didnt work. How to fix this issue?

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar{
    padding: 20px;
}

.navcontainer .navbar{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    
}

.navbar ul li{
    display: inline;
    justify-content: space-between;
    padding-left: 32px;
    text-decoration: none;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="stylesheet" href="style.css">
  
  <title>Frontend Mentor | Intro section with dropdown navigation</title>

  
</head>
<body>
  <div >
    <div >
      <img src="/images/logo.svg" alt="" >
      <ul>
        <a href="#"><li>Features</li></a>
        <a href="#"><li>Company</li></a>
        <a href="#"><li>Careers</li></a>
        <a href="#"><li>About</li></a>
        </ul>
      
      </div>
    </div>
  </div>
</body>
</html>

CodePudding user response：

you have an invalid HTML Markup. an <a>nchor can not be a direct child of a <ul>. The underline is not created by the <li> but the anchor!

Remove the underline by addressing the anchor:

a {
  text-decoration: none;
}

<header>
  <img src="/images/logo.svg" alt="" >
  <nav>
    <menu>
      <li><a href="#">Features</a></li>
      <li><a href="#">Company</a></li>
      <li><a href="#">Careers</a></li>
      <li><a href="#">About</a></li>
    </menu>
  </nav>
</header>

Note, that I replaced your tags with the correct semantic tags that are necessary for screen readers and improve accessibility.