I have created a dropdown menu with a triangle at the top in this style:
When the cursor hovers over only the triangle, it appears like this:
However, when the cursor is over the div, the hover effect for both elements is activated as shown here:
I am trying to achieve the hover effect for both elements when the cursor moves over the triangle. Can anyone point out what I might be doing wrong?
This is my custom CSS code snippet:
.msg_archivedropdown {
position: absolute;
color: #fff;
left: 40px;
top:0%;
background-color: #659DBD;
z-index: 100;
display:none;
border-radius: 2px;
border-top-left-radius: 0px;
box-shadow: 1px 1px 1px #000000;
}
.msg_archivedropdown:before {
content:"";
display: block;
position:absolute;
width:0;
height:0;
left:-7px;
top:0px;
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:7px solid #659DBD;
}
.msg_archivedropdown:hover::before {
border-right:7px solid #fff;
color: #659DBD;
}
.msg_optiondropdownpoint {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 30px;
padding-right: 30px;
}
.msg_optiondropdownpoint:hover {
background-color: #fff;
color: #659DBD;
}