Unable to remove underline from li elements using CSS-CodePudding

I am using NextJs framework for a frontend development I am new to frontend I am trying to create navbar in which I am getting underline below menu items.I tried few CSS property but they didn't work out.

Below is my code:

Navbar.js

import Link from 'next/link';

const Navbar =  () => {

return(
    <nav className='navigation'>
        <div className="logo">
            <h1>My logo</h1>
        </div> 
        <div className="menu">
            <ul>
                <li className="menu-items"><Link href="/">Home</Link></li>
                <li className="menu-items"><Link href="/about">About</Link></li>
                <li className="menu-items"><Link href="/contact">Contact</Link></li>
            </ul>
        </div>     
    </nav>
  );
}

export default Navbar;

global.css

 html,
 body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
   Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 }

 .navigation {
 display: flex;
 justify-content: space-between;
}

 .menu-items {
 list-style-type: none;
 display: inline;
 margin-right: 20px;
 background-color: coral;
 color: white;
 padding: 10px;
 border-radius: 3px; 
}

Someone let me know how can I achieve desired results any help would be appreciated.

CodePudding user response：

try using "Text Decoration".

.menu-items {
 list-style-type: none;
 display: inline;
 margin-right: 20px;
 background-color: coral;
 color: white;
 padding: 10px;
 border-radius: 3px;
 text-decoration: none; /* <=== add this */
}

if not work, try this.

.menu-items > a {
  text-decoration: none;
}