Why doesn't my anchor navigate in the dropdown?

Question

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>

I'm having trouble understanding the problem. It might help if you simplified your demo to just what's relevant and include enough CSS so the dropdown works. The images and other content just distract. Then, explain in more detail what you expect to happen. — isherwood, Feb 12 '21 at 15:12

trentHarlem · Accepted Answer · 2021-02-12T15:07:19.513

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);
}

score -2 · Answer 2 · answered Feb 12 '21 at 13:47

-2

Just Change the pointer-events: none; to pointer-events: all;

answered Feb 12 '21 at 13:47

mohudoom naina

1

If i turn it `all` right away it is going to be clickable even when it is invisible – Igor Feb 12 '21 at 13:52
Remove **pointer-events: none;** in **#router-list** – mohudoom naina Feb 12 '21 at 14:40
If I do so, it gets clickable even when invisible – Igor Feb 12 '21 at 14:52

Why doesn't my anchor navigate in the dropdown?

2 Answers2