htmlcssdropdownhrefpointer-events

Why doesn't my anchor navigate in the dropdown?

In CSS #lang-dropdown-button:focus should set pointer-events: all in #router-list , but it seems it doesn't work. The anchor doesn't navigate to the German on the dropdown. Why is that so?

*{
    margin: 0px;
    padding: 0px;
    border:none;
}

body {
    background-image: url(assets/bg.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#header {
    width: 94%;
    height: 50px;
    border-radius: 34px;
    margin: 35px 3% 0px;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: space-between;
    background-size: cover;
    filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.1));
    position: relative;
    z-index: 100;
}

#body {
    width: 94%;
    height: 1000px;
    margin: 35px 3% 35px;
    border-radius: 25px;
    background-color: rgb(255, 255, 255);
    filter: drop-shadow(0px 4px 20px rgba(0, 0, 0, 0.1));
}

#logo {
    align-self: center;
    height: 70px;
    width: 70px;
    border-radius: 14px;
    background-size: cover;
    cursor: pointer;
}



#cont1 {
    display: flex;
    align-self: center;
}

#cont2 {
    align-self: center;
}

#lang-dropdown {
    height: fit-content;
    width: fit-content;
    flex-direction: column;
    display: flex;
    margin-right: 20px;
    border-radius: 15px;
}

#elipse {
    height: 10px;
    width: 10px;
    border-radius: 100%;
    align-self: center;
    background-color: #333333;
}

#title {
    align-self: center;
    margin-left: 10px;
    display: flex;
    flex-direction: row;
}

#privacy {
    margin-left: 14px;
    font-family: Ubuntu-Md;
    font-style: normal;
    line-height: 1;
    font-size: 18px;
    position: absolute;
    align-self: center;
    color: #333333;
}



#lang {
    font-family: Ubuntu-Md;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 21px;
    align-self: center;
    color: #333333;
}



#text-container {
    padding: 0px;
}



#policy-date {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 21px;
    align-self: center;
    color: #838383;
    margin-top: 10px;
    padding-left: 3.5%;
    padding-bottom: 10px;
    
}

#text1 {
    font-family: Ubuntu-Md;
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    align-self: center;
    color: #333333;
    padding: 3% 3% 0px;
}

#body-header {
    width: 100%;
    /* border-bottom: #d6d6d6 solid 1px; */
}

#globe {
    color: #333333;
    margin-left: 3px;
    width: 25px;
    height: 25px;
}

#arrow {
    color: #333333;
    margin-left: 1px;
    margin-top: 1px;
    align-self: center;
}

#lang-dropdown-button {
    height: fit-content;
    width: fit-content;
    justify-content: space-around;
    flex-direction: row;
    display: flex;
    background-color: rgba(255, 255, 255, 0);
    cursor: pointer;
    border-radius: 15px;
    transition: all 0.6s ease;
    width: 110px;
}



#router-list ul {
    position: absolute;
    background-color: #E7E7E7;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
    height: 35px;
    width: 110px;
    border-radius: 0px 0px 15px 15px;
}

#router-list li {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
}

#last {
    border-radius: 0px 0px 15px 15px;
}

#router-list {
    position: relative;
    z-index: 50;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s ease;
    pointer-events: none;
}


#last #lang-btn {
    padding-bottom: 8px;
}
#router-list li:hover {
    background-color: #d4d1d1;
    border-radius: 0px;
}

#router-list #last:hover {
    background-color: #d4d1d1;
    border-radius: inherit;
}


/* #lang-dropdown-button:focus + #lang-dropdown{
    border-radius: 15px 15px 0px 0px;
} */

#lang-dropdown-button:focus {
    outline: none;
    background-color: #E7E7E7;
    border-radius: 15px 15px 0px 0px;
}

#lang-dropdown-button:focus + #router-list {
    opacity: 1;
    pointer-events: all;
    z-index: 200;
    transform: translateY(0px);
}

#lang-dropdown-button:hover{
    background-color: #d4d1d1;
}

#lang-btn {
    background-color: rgba(255, 255, 255, 0);
    width: 100%;
    height: 100%;
    font-family: Ubuntu-Md;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 21px;
    text-decoration: none;
    color: #333333;
    display: flex;
    justify-content: center;
    align-items: center;
}

#lang-btn:hover {
    cursor: pointer;
}


@font-face {
    font-family: "Ubuntu-md";
    src: url("assets/Ubuntu-Medium.ttf");
}


@font-face {
    font-family: "Ubuntu";
    src: url("assets/Ubuntu-Regular.ttf");
}



@media only screen and (max-width: 370px){
    #privacy {
        margin-right: 127px;
        font-size: 16px;

    }
    #text1 {

        font-size: 24px;

    }

}

@media only screen and (max-width: 620px){

    #text1 {
        padding: 5% 5% 0px;

    }
    #policy-date {
        padding: 0% 6% 10px;
        
    }

}

@media only screen and (max-width: 325px){
    #text1 {
        padding: 6% 6% 0px;
    }
    #policy-date {
        padding: 0% 7% 10px;
        
    }

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style_v2.css" rel="stylesheet"/>
    <title>Document</title>
</head>
<body>
    <div id="header">
        <div id="cont1">
            <img id="logo" src="assets/logo.png" >
            <div id ="title"><div id="elipse"></div> <div id="privacy">Privacy Policy</div> </div>
        </div>
        
        <div id="cont2">
            <div id="lang-dropdown">
                <button id="lang-dropdown-button" data-toggle="dropdown" >
                    <img id="arrow" src="assets/keyboard_arrow_down-24px 1.svg"/>
                    <div id="lang">English</div>
                    <img id="globe" src="assets/globe-24px.svg"/>
                </button>
                <div id="router-list" >
                    <ul>
                        <li id="last"><a href="de.html" id="lang-btn">Deutsch</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="box"></div>
    <div id="body">
        <div id="text-container">
            <div id="body-header"> 
                <div id="text1">title</div>
                <div id="policy-date">Effective Date: m d, y</div>
            </div>
            <div></div>
        </div>
    </div>
</body>
</html>

Solution

  • i believe it has something to do with the hierarchy of the css combinators https://www.w3schools.com/css/css_combinators.asp

    i couldn't get it work either.. maybe because the combinator is acting on the div... but the links are actually li's inside a ul. thats just a guess tho.

    I did however find you a work around. Switch to visibility:hidden instead of pointer-events. i tested it in VS code

    it solves your hidden link being clickable thing

            #router-list {
  position: relative;
  top: 20px;
  z-index: 50;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.4s ease;
  visibility: hidden;
  /* pointer-events: none; */
}

#lang-dropdown-button:focus + #router-list {
  opacity: 1;
  /* pointer-events: all; */
  visibility: visible;
  z-index: 200;
  transform: translateY(0px);
}