Hover effects on webpage overide dropdown navigation bar - html

Question

I have a webpage that uses purely html and CSS (no JavaScript yet). The webpage contains a simple, fixed position header with hover dropdowns for each category. The webpage content itself is arranged in 'tiles' that produce effects on hover to emphasize them (and link to other pages). I will attach an image to better explain. The dropdown works fine when at the very top of the webpage, however if the dropdown menu falls on top of one of the tiles the dropdown will disappear and trigger the tile hover effects instead.
I have ensured that all parts of the dropdown have a z-index greater than the tiles.
Dropdown HTML:
<nav class="navigation">
<ul>
<li class=dropdown>
catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
</ul>
</nav>
Page content HTML (example for single tile, code repeated):
<a href="content6.html" class="tile">
<img src="image1.jpg>
<div class="container">
<div class="overlay"></div> /* overlay that animates on hover */
/* content for the tile */
</div>
</a>
relevant CSS:
navigation {
position: fixed;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
z-index: 20;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
display: inline-block;
position: relative;
}
.dropdown-content a:hover {
background-color: blue;
color: white;
}
.dropdown:hover .dropdown-content{
display: block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
z-index: 17;
}
.tile:hover .overlay {
opacity: 0.1;
}
Image 1:
Top of page(Works Fine)
Image 2:
Scrolled down(Hovering over Content 3 will close dropdown)
I would like for the dropdown menu to stay on top of tiles regardless of whether or not the hover effects are triggered. I'm not sure if this will require JavaScript. Any help is appreciated!
Edit: Snippet Added
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
a:not(p):hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 10;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
position: fixed;
z-index: 20;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 1

This problem can be solved by changing the z-index of headerto 20. Even though the z-index of the .dropdownclass was 20, the z-index of the header element was 10.
Although the z-index is not inherited, one needs to take into consideration the stacking context. For example, if a sibling element B has a z-index that is greater than the z-index of sibling element A, B will be above A. If Ahas a child element that has a z-index higher than that of element B, B will still be shown above A provided that B has a greater z-index than A.
For more information about stacking contexts, check out this Post.
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
a:not(p):hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 20;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
z-index:20;
position: fixed;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.content1{
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<!DOCTYPE html >
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 2

Your hover effect is only applied to a, which means it loses the effect when mouse is not over the actual link.
Apply the hover to li instead, so it will cover it properly.
a:not(p):hover {
color: #38b6ff;
}
use this instead.
li:hover {
color: #38b6ff;
}
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
li:hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 10;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
position: fixed;
z-index: 20;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>