Search code examples
htmlcssbuttondrop-down-menu

Flickering near button's right edge

When you move the cursor close to the right edge of "Projects", it starts flickering.

:root {
    --light-gray: #979797;
    --dark-gray: #3D3D3D;
    --orange: #ff8400;
    --gray: #808080;
}

html, body {
    height: 100%;
    margin: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

li, .nav_links a, button {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: large;
    text-decoration: none;
    color: #edf0f1;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 6%;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: large;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--orange);
    padding-left: 6%;
}

.header nav {
    flex-grow: 1;
    text-align: center;
}

a {
    color: white;
}

.nav_links {
    list-style: none;
    color: white;
    display: flex;
    justify-content: center;
    position: relative;
}

.nav_links li {
    display: inline-block;
    padding: 0 20px;
    color: white;
}

.nav_links li a:hover {
    color: var(--orange);
}

.buttons_home {
    display: flex;
    justify-content: center;
    gap: 5%;
    margin-top: 10%;
    width: 100%;
    list-style: none;
    padding: 0;
}

.buttons_home li {
    width: 27%;
}

.home_button {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 20% 10%;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 125%;
    text-decoration: none;
    display: block;
    text-align: center;
}

.home_button:hover {
    background-color: transparent;
    border: 2px solid var(--orange);
    color: white;
}

.nav_links li a.active {
    color: var(--orange);
}

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: #000 url(bg.webp) repeat 0 0;
    flex-grow: 1;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: medium;
    border-top: 2px solid var(--orange);
    position: relative;
}

.footer p {
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Project dropdown */
.dropdown {
    position: relative;
}

.project_menu {
    display: none;
    top: 100%;
    left: 0;
    background-color: #000;
    border: 2px solid var(--orange);
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.project_menu li {
    padding: 10px 20px;
}

.project_menu li a {
    color: white;
    text-decoration: none;
}

.project_menu li a:hover {
    color: var(--orange);
}

.project_menu:hover {
    border: 2px solid white;
}

.dropdown:hover .project_menu {
    display: block;
    border-top: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="content">
            <ul class="buttons_home">
                <li><a class="home_button" href="about.html">About</a></li>
                <li><a class="home_button" href="resume.html">Resume</a></li>
                
                <li class="dropdown">
                    <a class="home_button" href="#">Projects</a>
                    <ul class="project_menu">
                        <li><a href="projects.html">Kalkulacka</a></li>
                        <li><a href="projects.html">Projekt2</a></li>
                        <li><a href="projects.html">Projekt3</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        
        <div class="footer">
            <p>© 2024</p>
        </div>
    </div>
</body>
</html>

:root {
    --light-gray: #979797;
    --dark-gray: #3D3D3D;
    --orange: #ff8400;
    --gray: #808080;
}

html, body {
    height: 100%;
    margin: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

li, .nav_links a, button {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: large;
    text-decoration: none;
    color: #edf0f1;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 6%;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: large;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--orange);
    padding-left: 6%;
}

.header nav {
    flex-grow: 1;
    text-align: center;
}

a {
    color: white;
}

.nav_links {
    list-style: none;
    color: white;
    display: flex;
    justify-content: center;
    position: relative;
}

.nav_links li {
    display: inline-block;
    padding: 0 20px;
    color: white;
}

.nav_links li a:hover {
    color: var(--orange);
}

.buttons_home {
    display: flex;
    justify-content: center;
    gap: 5%;
    margin-top: 10%;
    width: 100%;
    list-style: none;
    padding: 0;
}

.buttons_home li {
    width: 27%;
}

.home_button {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 20% 10%;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 125%;
    text-decoration: none;
    display: block;
    text-align: center;
}

.home_button:hover {
    background-color: transparent;
    border: 2px solid var(--orange);
    color: white;
}

.nav_links li a.active {
    color: var(--orange);
}

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: #000 url(bg.webp) repeat 0 0;
    flex-grow: 1;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: medium;
    border-top: 2px solid var(--orange);
    position: relative;
}

.footer p {
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Project dropdown */
.dropdown {
    position: relative;
}

.project_menu {
    display: none;
    top: 100%;
    left: 0;
    background-color: #000;
    border: 2px solid var(--orange);
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.project_menu li {
    padding: 10px 20px;
}

.project_menu li a {
    color: white;
    text-decoration: none;
}

.project_menu li a:hover {
    color: var(--orange);
}

.project_menu:hover {
    border: 2px solid white;
}

.dropdown:hover .project_menu {
    display: block;
    border-top: none;
}

https://jsfiddle.net/Matko223/opkd963x/15/

I tried to change the width and position of the dropdown menu, but couldn't figure it out. For some reason the dropdown menu is longer than the "Projects" button, therefore the border doesn't connect properly.

.project_menu {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: -2px;
    background-color: transparent;
    border: 2px solid var(--orange);
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    width: calc(100% + 4px);
}

What it should look like after hovering over the "Projects" button : Expected result

Video(Screen recorder wouldn't capture it): https://www.youtube.com/watch?v=A_r-XyMMwBs

It is even worse, when I test it on the Live Server extension.

Solution

  • The problem arises because the viewport width changes when the drop down menu is shown if there isn't enough room for it.

    A scroll bar appears on the right and this makes the viewport smaller.

    The list items are within a flex so they each become a little bit smaller when projects is hovered over. If the cursor is very near the right hand edge of projects on the hover, then projects gets slightly smaller so the cursor is outside it at which point projects goes back to its original width so the cursor is inside it and so on in a loop, giving the flicker effect.

    It depends on what you want the display to look like when the menu drops down, but as an example, this snippet doesn't alter the rest of the layout (ie leaves footer and anything else where it is) by displaying the drop down menu position absolute and with a higher z-index so it is seen over the stuff that follows the menu section.

    :root {
  --light-gray: #979797;
  --dark-gray: #3D3D3D;
  --orange: #ff8400;
  --gray: #808080;
}

html,
body {
  height: 100%;
  margin: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

li,
.nav_links a,
button {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: large;
  text-decoration: none;
  color: #edf0f1;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 6%;
  background: #000 url(bg.webp) repeat 0 0;
  color: #edf0f1;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: large;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 2px solid var(--orange);
  padding-left: 6%;
}

.header nav {
  flex-grow: 1;
  text-align: center;
}

a {
  color: white;
}

.nav_links {
  list-style: none;
  color: white;
  display: flex;
  justify-content: center;
  position: relative;
}

.nav_links li {
  display: inline-block;
  padding: 0 20px;
  color: white;
}

.nav_links li a:hover {
  color: var(--orange);
}

.buttons_home {
  display: flex;
  justify-content: center;
  gap: 5%;
  margin-top: 10%;
  width: 100%;
  list-style: none;
  padding: 0;
}

.buttons_home li {
  width: 27%;
}

.home_button {
  background-color: transparent;
  color: white;
  border: 2px solid white;
  padding: 20% 10%;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 125%;
  text-decoration: none;
  display: block;
  text-align: center;
}

.home_button:hover {
  background-color: transparent;
  border: 2px solid var(--orange);
  color: white;
}

.nav_links li a.active {
  color: var(--orange);
}

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  background: #000 url(bg.webp) repeat 0 0;
  flex-grow: 1;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #000 url(bg.webp) repeat 0 0;
  color: #edf0f1;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: medium;
  border-top: 2px solid var(--orange);
  position: relative;
}

.footer p {
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}


/* Project dropdown */

.dropdown {
  position: relative;
}

.project_menu {
  display: none;
  top: 100%;
  left: 0;
  background-color: #000;
  border: 2px solid var(--orange);
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  position: absolute;
  z-index: 1;
}

.project_menu li {
  padding: 10px 20px;
}

.project_menu li a {
  color: white;
  text-decoration: none;
}

.project_menu li a:hover {
  color: var(--orange);
}

.project_menu:hover {
  border: 2px solid white;
}

.dropdown:hover .project_menu {
  display: block;
  border-top: none;
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <div class="container">
    <div class="content">
      <ul class="buttons_home">
        <li><a class="home_button" href="about.html">About</a></li>
        <li><a class="home_button" href="resume.html">Resume</a></li>

        <li class="dropdown">
          <a class="home_button" href="#">Projects</a>
          <ul class="project_menu">
            <li><a href="projects.html">Kalkulacka</a></li>
            <li><a href="projects.html">Projekt2</a></li>
            <li><a href="projects.html">Projekt3</a></li>
          </ul>
        </li>
      </ul>
    </div>

    <div class="footer">
      <p>© 2024</p>
    </div>
  </div>
</body>

</html>