Css

Responsive navigation bar 

<link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet" />

<style>

  * {

    margin: 0px;

    font-family: Verdana, Geneva, Tahoma, sans-serif;

  }

  #navbar-parent {

    display: flex;

    height: 50px;

    width: auto;

    background-color: gray;

    justify-content: space-between;

    align-items: center;

    padding: 0px 10px;

  }

  .menu {

    display: flex;

    gap: 35px;

  }

 a {

    text-decoration: none;

    color: white;

  }

  li {

    list-style-type: none;

  }

  #logo {

    font-size: 20px;

    color: white;

  }

 

  .services {

    position: relative;

  }

 

  .dropdown {

    position: absolute;

    background-color: lightgray;

    padding: 10px;

    border-radius: 3px;

    display: none;

    left: 20px;

    top: 38px;

  }

 

  .dropdown li {

    width: 80px;

    padding: 5px 0px;

  }

 

  .dropdown li a {

    text-align: left;

  }

 

  .dropdown li a:hover {

    color: pink;

  }

 

  .services:hover .dropdown {

    display: block;

 

  }

 

  .services:hover .ri-arrow-down-s-fill {

    display: inline;

 

  }

 

  .services:hover .ri-arrow-up-s-fill {

    display: none;

 

  }

 

  .menu li {

    padding: 10px;

    border-radius: 3px;

  }

 

  .menu li:hover {

    background-color: lightgray;

  }

 

  .hamburger {

    font-size: 25px;

    display: none;

 

  }

 

  input[type="checkbox"] {

    display: none;

  }

 

  .ri-arrow-down-s-fill {

    display: none;

  }

 

  @media (max-width:700px) {

    .menu {

      position: absolute;

      left: 0px;

      right: 0px;

      display: none;

      background-color: lightgray;

      text-align: center;

    }

 

    .hamburger {

      display: block;

    }

 

    input[type="checkbox"]:checked~.menu {

      display: block;

    }

 

    .dropdown {

      left: 60%;

      background-color: gray;

    }

 

    .menu li:hover {

      background-color: gray;

    }

 

    .dropdown li a {

      text-align: left;

    }

  }

</style>

 

<div id="navbar-parent">

  <div id="logo">Uncodemy.com</div>

  <ul class="nav-links">

    <input type="checkbox" id="checkbox-toggle">

    <label for="checkbox-toggle" class="hamburger">&#9776;</label>

    <div class="menu">

      <li><a href="home.html">Home</a></li>

      <li class="services">

        <a href="services.html">Services</a> <i class="ri-arrow-up-s-fill"></i><i class="ri-arrow-down-s-fill"></i>

        <ul class="dropdown">

          <li><a href="react.html">React Js</a></li>

          <li><a href="node.html">NodeJs</a></li>

        </ul>

      </li>

      <li><a href="about.html">About us</a></li>

      <li><a href="contact.html">Contact</a></li>

    </div>

  </ul>

</div>