My website contains a <div> that serves as a link to address1. Adjacent to this div is a drop-down menu with a link to address2. Strangely, the second link seems to override the first one, making Link1 non-clickable.
https://i.sstatic.net/eBAEM.png
In the image provided, the Link1 text, the image, and the blue section should all lead to address1, while only Link2, triggered upon hovering over the arrow, should direct to address2. Any suggestions on how to resolve this issue?
HTML:
<html><head><link rel="stylesheet" href="style.css"></head><body><center>
<a href="address1">
<div class="card">
<div class="dropdown"><img src="img/dropdown.png" class="dropdownarrow"><div class="dropdown-content">
<a class="dropdown-content-item" href="address2">Link2</a>
</div></div><img src="img/smiley.png" class="cardimg">
<div class="container" align="center">
Link1
</div>
</div></a>
</center></body></html>
CSS:
.card {
padding-top: 20px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
background: white;
transition: 0.3s;
width: 20%;
border-radius: 5px;
height: 90%;
display: inline-block;
margin: 20px;
position: relative;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
background-color: #d3f3ff
}
.cardimg {
border-radius: 5px 5px 0 0;
max-width: 50%;
height: 100%;
max-height: 100px;
padding-bottom: 5px;
}
.dropdown {
position: absolute;
right: 0px;
top: 0px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropdownarrow {
background-color: #96ffcc;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content-item {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.container {
padding-top: 5px;
padding-bottom: 5px;
background: #eeeeee;
height: 100%;
}