Why the links in the lower third of the buttons don't work?-CodePudding

I have a pure CSS Dropdown button and would like to keep it without JS.

However, I have the following problem; as soon as I click on the bottom third of one of the button links, only the Dropdown menu closes but the link is not opening. The links only work from the beginning of the text (up from the bottom). Everything below the text is not clickable or does not open the link. Everything above the beginning of the text is working fine. I hope I have described my problem understandably enough.

So my question is of course: where is my error or what do I have to fix in my code so that the entire surface of the buttons become clickable links?

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}
h1 {
  color: white;
}
/* Dropdown container start */
.dropdown {
  display: inline-block;
  position: relative;
  margin: 10px 0 0 0;
}

/* button */
.dropbtn {
  padding: 8px 12px;
  color: white;
  background-color: #121212;
  border: 1.5px solid white;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.25s ease-out;
}

/* Dropdown content */
.dropdown .dropdown-content {
  position: absolute;
  border-radius: 3px;
  top: 50%;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: 0.25s ease-out;
}
.dropdown-content a {
  color: black;
  background-color: #f0f0f0;
  border-radius: 3px;
  margin-top: 3px;
  padding: 8px 12px;
  display: block;
  text-decoration: none;
  transition: 0.25s ease-out;
  width: 130px;
}
.dropdown-content a:hover {
  background-color: lightgray;
}

/* show Dropdown content */
.dropdown:focus .dropdown-content {
  outline: none;
  transform: translateY(20px);
  visibility: visible;
  opacity: 1;
}

.dropbtn:hover, .dropdown:focus .dropbtn {
  background-color: #f0f0f0;
  color: black;
  border: 1.5px solid #f0f0f0;
}

/* mask to close menu by clicking on the button */
.dropdown .db2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  display: none;
}
.dropdown:focus .db2 {
  display: inline-block;
}
</style>
</head>
<body>
  <h1>My example Website</h1>
<div  tabindex="1" title="Open the main menu">
  <div  tabindex="1"></div>
  <a >My menu</a>
   <div >
  <a href="javascript:;">Link 1</a>
  <a href="random-en.html">Link 2</a>
  <a href="3d-en.html">Link 3</a>
  <a href="info-en.html">Link 4</a>
  <a href="c_en/hashtag.html">Link 5</a>
   </div>
</div>

</body>
</html>

CodePudding user response：

Focus is lost in 0.25 sec while it needs a longer time for click work. I updated the transition time to 1 sec.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-size: 21px;
        font-family: Tahoma, Geneva, sans-serif;
        max-width: 550px;
        margin: 0 auto;
        background-color: black;
      }
      h1 {
        color: white;
      }
      /* Dropdown container start */
      .dropdown {
        display: inline-block;
        position: relative;
        margin: 10px 0 0 0;
      }

      /* button */
      .dropbtn {
        padding: 8px 12px;
        color: white;
        background-color: #121212;
        border: 1.5px solid white;
        border-radius: 3px;
        cursor: pointer;
        transition: 0.25s ease-out;
      }

      /* Dropdown content */
      .dropdown-content {
        position: absolute;
        border-radius: 3px;
        z-index: 9999;
        visibility: hidden;
        opacity: 0;
        transition: 1s ease-out;
      }
      .dropdown-content a {
        color: black;
        background-color: #f0f0f0;
        border-radius: 3px;
        margin-top: 3px;
        padding: 8px 12px;
        display: block;
        text-decoration: none;
        transition: 0.25s ease-out;
        width: 130px;
      }
      .dropdown-content a:hover {
        background-color: lightgray;
      }

      /* show Dropdown content */
      .dropdown:focus .dropdown-content {
        outline: none;
        margin-top: 20px;
        visibility: visible;
        opacity: 1;
        transition: 0.25s ease-out;
      }

      .dropbtn:hover,
      .dropdown:focus .dropbtn {
        background-color: #f0f0f0;
        color: black;
        border: 1.5px solid #f0f0f0;
      }

      /* mask to close menu by clicking on the button */
      .dropdown .db2 {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
        display: none;
      }
      .dropdown:focus .db2 {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <h1>My example Website</h1>
    <div  tabindex="1" title="Open the main menu">
      <div  tabindex="1"></div>
      <a >My menu</a>
      <div >
        <a href="random-e.html" target="_blank">Link 1</a>
        <a href="random-en.html">Link 2</a>
        <a href="3d-en.html">Link 3</a>
        <a href="info-en.html">Link 4</a>
        <a href="c_en/hashtag.html">Link 5</a>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

I have now found the solution. I have deleted the following values from my CSS:

.dropdown:focus .dropdown-content {transform:translateY(20px);}
.dropdown {position:relative;}

And replaced the following Values

.dropdown .dropdown-content {position:absolute; top:50%;}

With these values

.dropdown .dropdown-content {position:relative; margin-top:12px;}

As you can see in my new code, you can now click wherever you want and the link will work as it should work.

<!DOCTYPE html>
<html>
<head>
<style>
body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}
h1 {
  color: white;
}
/* Dropdown container start */
.dropdown {
  display: inline-block;
  margin: 10px 0 0 0;
}

/* button */
.dropbtn {
  padding: 8px 12px;
  color: white;
  background-color: #121212;
  border: 1px solid white;
  border-radius: 3px;
  cursor: pointer;
  transition: 0.25s ease-out;
}

/* Dropdown content */
.dropdown .dropdown-content {
  position: relative;
  border-radius: 3px;
  margin-top: 12px;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: 0.25s ease-out;
}
.dropdown-content a {
  color: black;
  background-color: #f0f0f0;
  border-radius: 3px;
  margin-top: 3px;
  padding: 8px 12px;
  display: block;
  text-decoration: none;
  transition: 0.25s ease-out;
  width: 100px;
}
.dropdown-content a:hover {
  background-color: lightgray;
}

/* show Dropdown content */
.dropdown:focus .dropdown-content {
  outline: none;

  visibility: visible;
  opacity: 1;
}

.dropbtn:hover, .dropdown:focus .dropbtn {
  background-color: #f0f0f0;
  color: black;
  border: 1.5px solid #f0f0f0;
}

/* mask to close menu by clicking on the button */
.dropdown .db2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
  display: none;
}
.dropdown:focus .db2 {
  display: inline-block;
}
</style>
</head>
<body>
  <h1>My example Website</h1>
<div  tabindex="1" title="Open the main menu">
  <div  tabindex="1"></div>
  <a >My menu</a>
   <div >
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  <a href="#">Link 5</a>
   </div>
</div>

</body>
</html>
```