I have added drop down menus to my website, but am running into a problem where my links do not always work when clicked. Sometimes clicking a link just makes the drop down menu disappear, but if you keep trying eventually it will take you to where you are trying to go.
I originally suspected it had something to do with the transition duration, but playing around with the transitions/waiting for the transitions to complete before clicking does not appear to change anything.
Here is the html block for the drop down menu navbar
nav {
position: sticky;
top: -20px;
}
.dropdown {
width: auto;
height: auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.Python,
.cPP {
position: relative;
width: 500px;
margin-top: 20px;
}
.Python ul,
.cPP ul {
position: absolute;
margin-top: 10px;
width: 200px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: disc;
border: 4px solid white;
border-radius: 5px;
background-color: rgb(86, 114, 117);
opacity: 0;
pointer-events: none;
transform: translateY(-15px);
transition: all 0.4s ease;
}
.Python li,
.cPP li {
background-color: rgb(216, 192, 147);
width: 100%;
height: 100%;
border: 1px solid black;
border-radius: 2px;
align-items: center;
line-height: 1.3rem;
}
.Python li:hover,
.cPP li:hover {
background-color: rgb(207, 151, 46);
transition-duration: 0.5s;
pointer-events: all;
}
.Python a,
.cPP a {
color: black;
text-decoration: none;
font-size: 0.5em;
}
.home a {
font-size: 1.0em;
align-items: center;
}
.home a:hover {
color: rgb(24, 218, 208);
transition-duration: 0.4s;
}
.dropdown button {
background: rgb(51, 51, 51);
color: rgb(255, 255, 255);
width: 100%;
font-size: 1.2em;
cursor: pointer;
padding: 5px;
border-color: turquoise;
}
.dropdown button:hover {
color: rgb(132, 255, 243);
border-color: rgb(255, 145, 0);
transition-duration: 0.4s;
}
.Python button:focus ul,
.cPP button:focus ul {
opacity: 1;
pointer-events: all;
transform: translateY(0px);
}<nav>
<div class="dropdown">
<div class="home">
<a href="../index.html">Home</a>
</div>
<div class="Python">
<button>Python</button>
<ul>
<li><a href="../1DKinematics/1DKinematics.html"> 1-D Kinematics</a></li>
<li><a href="./pendulumFriction.html"> Damped Pendulum</a></li>
<li><a href="./drivenPendulum.html"> Driven Pendulum</a></li>
<li><a href="./elasticPendulum.html"> Elastic Pendulum</a></li>
<li><a href="./doublePendulum.html"> Double Pendulum</a></li>
<li><a href="./elasticDoublePendulum.html"> Elastic Double Pendulum</a></li>
<li><a href="./RKvsEC.html"> Runge-Kutta vs. Euler-Cromer </a></li>
<li><a href="../oceanography/bobInWater.html"> Dynamics of Body in the Ocean </a></li>
</ul>
</div>
<div class="cPP">
<button>C </button>
</div>
</div>
</nav>CodePudding user response：
Here are two things you might want to do to fix the problem.
- Style your
atag so it takes full width/height (easier to click) - Change
pointer-events: alltopointer-events: auto, sinceallis only for SVG (See: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events).
// For test only
document.querySelectorAll('.dropdown a').forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault()
console.log('clicked')
})
})nav {
position: sticky;
top: -20px;
}
.dropdown {
width: auto;
height: auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.Python,
.cPP {
position: relative;
width: 500px;
margin-top: 20px;
}
.Python ul,
.cPP ul {
position: absolute;
margin-top: 10px;
width: 200px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: disc;
border: 4px solid white;
border-radius: 5px;
background-color: rgb(86, 114, 117);
opacity: 0;
pointer-events: none;
transform: translateY(-15px);
transition: all 0.4s ease;
}
.Python li,
.cPP li {
background-color: rgb(216, 192, 147);
width: 100%;
height: 100%;
border: 1px solid black;
border-radius: 2px;
align-items: center;
line-height: 1.3rem;
}
.Python li:hover,
.cPP li:hover {
background-color: rgb(207, 151, 46);
transition-duration: 0.5s;
pointer-events: all;
}
.Python a,
.cPP a {
color: black;
text-decoration: none;
font-size: 0.5em;
}
.home a {
font-size: 1.0em;
align-items: center;
}
.home a:hover {
color: rgb(24, 218, 208);
transition-duration: 0.4s;
}
.dropdown button {
background: rgb(51, 51, 51);
color: rgb(255, 255, 255);
width: 100%;
font-size: 1.2em;
cursor: pointer;
padding: 5px;
border-color: turquoise;
}
.dropdown button:hover {
color: rgb(132, 255, 243);
border-color: rgb(255, 145, 0);
transition-duration: 0.4s;
}
.Python button:focus ul,
.cPP button:focus ul {
opacity: 1;
pointer-events: all;
transform: translateY(0px);
}
/* Code added */
.dropdown ul li a {
display: block;
}<nav>
<div class="dropdown">
<div class="home">
<a href="../index.html">Home</a>
</div>
<div class="Python">
<button>Python</button>
<ul>
<li><a href="../1DKinematics/1DKinematics.html"> 1-D Kinematics</a></li>
<li><a href="./pendulumFriction.html"> Damped Pendulum</a></li>
<li><a href="./drivenPendulum.html"> Driven Pendulum</a></li>
<li><a href="./elasticPendulum.html"> Elastic Pendulum</a></li>
<li><a href="./doublePendulum.html"> Double Pendulum</a></li>
<li><a href="./elasticDoublePendulum.html"> Elastic Double Pendulum</a></li>
<li><a href="./RKvsEC.html"> Runge-Kutta vs. Euler-Cromer </a></li>
<li><a href="../oceanography/bobInWater.html"> Dynamics of Body in the Ocean </a></li>
</ul>
</div>
<div class="cPP">
<button>C </button>
</div>
</div>
</nav>CodePudding user response：
Thanks to Sean's suggestion, the fix was to ensure the anchor is not covered by the list, that way we click the links in the anchor instead of the list element. Here is the fix in CSS:
a{
z-index: 100;
}