I have a problem where my drop down disappears after I move the mouse away from the button. I have multiple pages in my website and it happens only on some of them. I thought it was because the header was in the way but that wasn't it, Or I just couldn't fix it. any ideas how to fix. here is my css and html
body {
font-family: Calibri;
margin: 0;
}
.Headers {
background-color: cadetblue;
font-family: Georgia;
}
#secondheader {
margin-top: 0px;
margin-bottom: 1px;
padding-bottom: 20px;
color: white;
}
.Menu {
background-color: #ddd;
}
.Menu a {
background-color: #ddd;
font-size: 20px;
padding: 4px;
padding-right: 15px;
text-decoration: none;
color: black;
}
.Menu a:visited {
color: black;
}
.Menu a:hover {
background-color: gray;
}
.Menu ul {
margin-top: 0px;
padding-left: 0px;
}
.Menu li {
display: inline;
padding: 5px;
}
.dropbtn {
background-color: #ddd;
border: none;
font-size: 20px;
padding: 5px;
padding-right: 15px;
font-family: Calibri;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
z-index: -1;
}
.dropdown-content a {
color: black;
padding: 5px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: gray;
}
.pagecontent {
width: 250px;
}
.pagecontent h1 {
color: white;
font-family: Helvetica;
}
.pagecontent ul {
color: white;
font-size: 20px;
}
.pagecontent ul li {
margin: 10px;
}
.pagecontent img {
margin: 10px;
margin-left: 30px;
width: 150px;
height: 200px;
border: 1px solid white;
}<body style="background-image:url(Images/BackgroundImage.jpeg);">
<div class="Headers">
<h1 style="margin-bottom:0px; margin-top:0px;">
Details
</h1>
<h2 id="secondheader">
Some things about me
</h2>
</div>
<div class="Menu">
<ul>
<li>
<a href="Default.aspx">Home</a>
</li>
<li>
<a href="Details.aspx">Details</a>
</li>
<li>
<a href="OnMe.aspx">On Me</a>
</li>
<li>
<a href="Gallery.aspx">Gallery</a>
</li>
<li>
<div class="dropdown">
<button class="dropbtn">Links</button>
<div class="dropdown-content">
<a href="https://store.steampowered.com/app/730/CounterStrike_Global_Offensive/" target="_blank">Csgo</a>
<a href="https://www.roblox.com/home" target="_blank">Roblox</a>
<a href="https://www.minecraft.net/en-us" target="_blank">Minecraft</a>
<a href="https://playvalorant.com/en-us/" target="_blank">Valorant</a>
</div>
</div>
</li>
<li>
<a href="mailto:[email protected]">Contact me</a>
</li>
</ul>
</div>
<div class="pagecontent">
<h1>
Details:
</h1>
<ul>
<li>
First Name: Asaf
</li>
<li>
Last Name: Pro
</li>
<li>
Class: yod 3
</li>
<li>
Email:[email protected]
</li>
</ul>
<img src="Images/Asaf.jpg" />
</div>
</body>Pretty simple issue with a simple solution:
remove the z-index: -1; fromt he class .dropdown-content. The negative Z-Index pushes the element below the body (layer-wise), which means it can't be hovered with the mouse as you will hover the body not the dropdown-box.
body {
font-family: Calibri;
margin: 0;
}
.Headers {
background-color: cadetblue;
font-family: Georgia;
}
#secondheader {
margin-top: 0px;
margin-bottom: 1px;
padding-bottom: 20px;
color: white;
}
.Menu {
background-color: #ddd;
}
.Menu a {
background-color: #ddd;
font-size: 20px;
padding: 4px;
padding-right: 15px;
text-decoration: none;
color: black;
}
.Menu a:visited {
color: black;
}
.Menu a:hover {
background-color: gray;
}
.Menu ul {
margin-top: 0px;
padding-left: 0px;
}
.Menu li {
display: inline;
padding: 5px;
}
.dropbtn {
background-color: #ddd;
border: none;
font-size: 20px;
padding: 5px;
padding-right: 15px;
font-family: Calibri;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
}
.dropdown-content a {
color: black;
padding: 5px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: gray;
}
.pagecontent {
width: 250px;
}
.pagecontent h1 {
color: white;
font-family: Helvetica;
}
.pagecontent ul {
color: white;
font-size: 20px;
}
.pagecontent ul li {
margin: 10px;
}
.pagecontent img {
margin: 10px;
margin-left: 30px;
width: 150px;
height: 200px;
border: 1px solid white;
}<body style="background-image:url(Images/BackgroundImage.jpeg);">
<div class="Headers">
<h1 style="margin-bottom:0px; margin-top:0px;">
Details
</h1>
<h2 id="secondheader">
Some things about me
</h2>
</div>
<div class="Menu">
<ul>
<li>
<a href="Default.aspx">Home</a>
</li>
<li>
<a href="Details.aspx">Details</a>
</li>
<li>
<a href="OnMe.aspx">On Me</a>
</li>
<li>
<a href="Gallery.aspx">Gallery</a>
</li>
<li>
<div class="dropdown">
<button class="dropbtn">Links</button>
<div class="dropdown-content">
<a href="https://store.steampowered.com/app/730/CounterStrike_Global_Offensive/" target="_blank">Csgo</a>
<a href="https://www.roblox.com/home" target="_blank">Roblox</a>
<a href="https://www.minecraft.net/en-us" target="_blank">Minecraft</a>
<a href="https://playvalorant.com/en-us/" target="_blank">Valorant</a>
</div>
</div>
</li>
<li>
<a href="mailto:[email protected]">Contact me</a>
</li>
</ul>
</div>
<div class="pagecontent">
<h1>
Details:
</h1>
<ul>
<li>
First Name: Asaf
</li>
<li>
Last Name: Pro
</li>
<li>
Class: yod 3
</li>
<li>
Email:[email protected]
</li>
</ul>
<img src="Images/Asaf.jpg" />
</div>
</body>