I'm currently working on a Google clone project, and I've run into an issue with the dropdown menu. It looks fine when the viewport width is wide enough, but it becomes transparent and hides behind the input field when the viewport is small, as shown in this image:
Does anyone have any suggestions on how to fix this issue? Please test it in a responsive viewport.
You can view the problem here: Google Clone Demo
PS: I have already attempted to adjust the z-index property, but it hasn't resolved the issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google Clone Optimized (by Diefonro)</title>
...
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<nav>
...
</nav>
</header>
<main>
<section>
...
</section>
</main>
<footer>
<div class="footer-cont">
...
</div>
</footer>
</body>
</html>
* {
margin: 0;
}
html{
min-width: 100vw;
overflow-y: hidden;
}
body {
font-family: Arial, sans-serif;
}
...