HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>nav child selector demo</title>

  <style>

    body { font-family: sans-serif; padding: 16px; }

    nav.main ul { list-style: none; padding: 0; display: flex; gap: 16px; }

    nav.main li { position: relative; }

    nav.main ul ul { position: absolute; top: 100%; left: 0; flex-direction: column; background: #fff; border: 1px solid #ccc; padding: 8px; display: none; }

    nav.main li:hover > ul { display: flex; }

    a.top-link { font-weight: bold; color: #059669; text-decoration: none; }

  </style>

</head>

<body>

  <nav class="main">

    <ul>

      <li><a href="#">Home</a></li>

      <li>

        <a href="#">Products</a>

        <ul>

          <li><a href="#">Sub-link A</a></li>

          <li><a href="#">Sub-link B</a></li>

        </ul>

      </li>

      <li><a href="#">Contact</a></li>

    </ul>

  </nav>

  <p>Top links are bold green. Hover Products to see dropdown (unchanged style).</p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    $("nav.main > ul > li > a").addClass("top-link");

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

nav > ul > li > a top-level links (Try It)