Hey there!
I recently updated my dropdown menu by adding borders, but I'm facing an issue where the hover color doesn't align perfectly with the border, leaving a small line visible.
https://i.sstatic.net/dianL.png
Interestingly, hovering over the line selects the parent element, but not the actual object itself, making it unclickable.
I need to adjust the hover style to align with the border and eliminate the dark stripe in front of the cell.
You can view the problem here: https://jsbin.com/cejigelobi/edit?html,css,output Click on the 3 lines -> Click on Products -> Hover over a submenu to see the issue.
HTML:
:root {
--background-color: #001728;
--darker-background-color: #000000;
--accent-color: #20cc5b;
--text-color: #FFFFFF;
--navbar-height: 80px;
}
* {
margin: 0;
padding: 0;
font-size: 22px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: var(--text-color);
}
html {
height: 100%;
}
body {
height: 100%;
background-color: var(--background-color);
}
nav {
height: var(--navbar-height);
background-color: var(--background-color);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 4px solid var(--accent-color);
}
nav .logo {
margin-left: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 35px;
font-variant: small-caps;
text-decoration: none;
}
nav ul {
height: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
list-style: none;
}
nav li {
height: 100%;
width: 150px;
text-align: center;
position: relative;
}
nav li:hover {
background: var(--accent-color);
}
nav ul a {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.dropdown {
height: min-content;
width: 200px;
background: var(--background-color);
box-sizing: border-box;
border-left: 2px solid var(--accent-color);
border-right: 2px solid var(--accent-color);
border-bottom: 4px solid var(--accent-color);
display: none;
flex-direction: column;
position: absolute;
left: 0;
top: var(--navbar-height);
}
.dropdown li {
height: 70px;
width: 100%;
}
.dropdown li a {
justify-content: flex-start;
padding-left: 30px;
width: calc(100% - 30px);
}
nav li:hover .dropdown {
display: flex;
}
nav input[type="checkbox"] {
display: none;
}
.expandable_li {
display: flex;
justify-content: center;
align-items: center;
}
.toggle_button {
width: 30px;
height: 23px;
position: absolute;
top: 25px;
right: 25px;
display: none;
flex-direction: column;
justify-content: space-between;
}
.bar {
height: 4px;
width: 100%;
background: var(--text-color);
border-radius: 100px;
}
@media(max-width: 850px) {
.toggle_button {
display: flex;
}
nav ul {
height: min-content;
width: 100%;
background: var(--background-color);
display: none;
position: absolute;
top: var(--navbar-height);
}
nav li {
height: min-content;
width: 100%;
}
nav ul a {
padding: 30px 0;
}
.expandable_li {
display: block;
}
.expandable_li label {
padding: 30px 0;
cursor: pointer;
display: block;
}
.expandable_li:hover .dropdown {
display: none;
}
.expandable_li input[type="checkbox"]:checked~.dropdown {
display: block;
}
.dropdown {
position: static;
width: 100%;
}
.dropdown li {
padding: 0;
display: block;
position: static;
}
.dropdown li a {
width: 100%;
padding: 0;
justify-content: center;
}
#toggle_button:checked~ul {
display: block;
}
}<nav>
<a class="logo" href="#">wesodev</a>
<input type="checkbox" id="toggle_button">
<label for="toggle_button" class="toggle_button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</label>
<ul>
<li><a href="#">Home</a></li>
<li class="expandable_li">
<input type="checkbox" id="products_checkbox">
<label for="products_checkbox">Products</label>
<ul class="dropdown">
<li><a href="#">Financist</a></li>
<li><a href="#">Coming Soon</a></li>
<li><a href="#">Coming Soon</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>