When you move the cursor close to the right edge of “Projects”, it starts flickering.
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Martin Valapka</title>
<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>
</code>
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Martin Valapka</title>
<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>
</code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Martin Valapka</title>
<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>
<code>: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;
}
</code>
<code>: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;
}
</code>
: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.
<code>.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);
}
</code>
<code>.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);
}
</code>
.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 :
**