Css

<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;
    cursor: pointer;
}
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">webphplearn.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>Home</a></li>
        <li><a>Registration</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>Contact</a></li>   
        </div>
    </ul>
</div>