the hover dropdown menu does not position itself the right place - html

Question

I am writing a new web page, and I am stuck In the navbar specify the responsive part...
when I zoom out the web page, the dropdown menu does not align itself with the parent link
Is that normal? I tried to use rem and percentage units in the left CSS property for the dropdown ul but that didn't work,, Is there a way to fix it or I have to put the navbar into a container and center it?
my code:
* {
box-sizing: border-box
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
nav {
display: grid;
grid-template-columns: 5rem 1fr;
align-items: center;
background-color: #000000;
}
.logo, .menu {
margin-left: 2rem;
}
.logo h1 {
color: #FFF;
text-transform: uppercase;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 5px;
}
.menu {
display: block;
position: relative;
}
.menu li {
display: inline-block;
color: #808080;
text-transform: uppercase;
list-style: none;
font-size: .9rem;
font-weight: 400;
letter-spacing: 1px;
padding: .4rem .4rem;
}
.menu .active {
color: #FFF;
}
.menu ul {
width: 20%;
height: 0;
opacity: 0;
position: absolute;
left: 30%;
top: 25px;
border-radius: 4px;
z-index: 1;
padding: 10px 0;
background: #FFF;
box-shadow: 0 2px 30px 0px rgba(0, 0, 0, 0.2);
transition: all .5s ease;
}
.menu > li:nth-of-type(4) > a {
display: block;
text-align: center;
text-decoration: none;
color: #808080;
}
.menu > li:nth-of-type(4) > a::after, .menu ul:before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 5 Free";
}
.menu ul:before {
font-weight: 900;
position: absolute;
top: -15px;
left: 25px;
content: "\f0d8";
color: #fff;
font-size: 25px;
}
.menu > li:nth-of-type(4) > a::after {
font-weight: 900;
padding-left: 5px;
content: "\f0d7";
}
.menu ul li {
display: none;
padding: 1rem 0;
text-indent: 20px;
cursor: pointer;
transition: .5s all ease-out;
}
.menu ul li a {
color: #000;
text-decoration: none;
letter-spacing: normal;
text-transform: capitalize;
}
.menu ul li:hover {
background-color: #e74208;
}
.menu ul li:hover a {
color: #fff;
}
.menu li:nth-of-type(4):hover ul {
height: auto;
opacity: 1;
}
.menu li:nth-of-type(4):hover ul li {
display: block;
}
<nav>
<div class="logo"><!-- Logo -->
<h1>Hexa</h1>
</div>
<ul class="menu"><!-- Nav Menu -->
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>
Parent Link
<ul>
<li>Architectural Design</li>
<li>Interior</li>
<li>Building</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>

Answer 1

To position your dropdown menu you should add a position relative to is parent li. You are positioning the dropdown absolutely in relation to your .menu
.menu > li:nth-of-type(4) {
position: relative;
}