Hey there, I'm experiencing a strange issue with my navigation bar. When hovering the mouse between the first drop-down link and the second drop-down link, a strange jitter occurs.
Can someone provide assistance in resolving this issue?
You can witness it happening at this link.
I've attempted to add margins and padding to the li element, but it doesn't seem to help. There is always an intersection between menu item 1 and menu item 2 that causes both menus to try and open, resulting in a jittery effect.
Below is the code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Strange Navigation Issue</title>
<style>
.main-nav {
}
.main-nav,
.main-nav * {
margin: 0;
padding: 0;
list-style: none;
}
.main-nav > ul > li {
position: relative;
white-space: nowrap;
float: left;
}
.main-nav a {
display: block;
position: relative;
color: #413e66;
padding: 10px 15px;
transition: 0.8s;
font-size: 14px;
font-family: "Open Sans", sans-serif;
text-transform: uppercase;
font-weight: 600;
}
.main-nav a:hover,
.main-nav .active > a,
.main-nav li:hover > a {
color: #1bb1dc;
text-decoration: none;
}
.......... (the rest of the CSS code continues)
</style>
</head>
......(the rest of the HTML code continues here)
</body>
</html>