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

user_19320668 0
Viewed 77

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 class="dropdown" tabindex="1" title="Open the main menu">
  <div class="db2" tabindex="1"></div>
  <a class="dropbtn">My menu</a>
   <div class="dropdown-content">
  <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>

dropdown href css html
3 Answers

I have now found a solution but it is only working inside the snippet, as soon as i integrate it into my website, the style is messed up because of the missing position i think so... :/

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 class="dropdown" tabindex="1" title="Open the main menu">
  <div class="db2" tabindex="1"></div>
  <a class="dropbtn">My menu</a>
   <div class="dropdown-content">
  <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>
```

user_193206680

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 class="dropdown" tabindex="1" title="Open the main menu">
      <div class="db2" tabindex="1"></div>
      <a class="dropbtn">My menu</a>
      <div class="dropdown-content">
        <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>

user_193040430

Ok, I have now my final CSS Dropdown solution that seem to work for me. I get inspired by this website https://lage.us/CSS-Onclick-Dropdown-Menu.html and its very slim code.

Thanks anyway to everyone who helped and gave some thought to the problem.

body {
  font-size: 21px;
  font-family: Tahoma, Geneva, sans-serif;
  max-width: 550px;
  margin: 0 auto;
  background-color: black;
}

h1 {
  color: white;
}


/*start of the dropdown container*/

.menutop {
  position: relative;
  display: inline-block;
  z-index: 2;
  margin-top: 1px;
  outline: 0;
  text-align: left;
  cursor: pointer;
  border: 2px solid #f0f0f0;
  border-radius: 4px;
  background: #121212;
  color: white;
  padding: 5px 10px;
}

.menutop:hover {
  border: 2px solid #f0f0f0;
  background: #f0f0f0;
  color: black;
}


/*labeling of the left button*/

.menutop::before {
  content: "\2630 \a0 Menu";
  padding: 5px 10px;
}

.menutop:focus {
  pointer-events: none;
}


/*If :focus detected the dropdown menu is displayed by making it visible*/

.menutop:focus .menutop-dropdown {
  opacity: 1;
  visibility: visible;
}


/*style for the dropdown box*/

.menutop-dropdown {
  background: transparent;
  width: auto;
  margin-top: 6px;
  pointer-events: auto;
  position: absolute;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: visibility 1s;
}


/*style the links in the dropdown*/

.menutop-dropdown a {
  background: #f0f0f0;
  margin: 6px 0 0 -12px;
  border: 2px solid #f0f0f0;
  border-radius: 4px;
  outline: 0;
  display: inline-block;
  color: black;
  text-decoration: none;
  width: 140px;
  padding: 8px;
}

.menutop-dropdown a:hover {
  background: #121212;
  border: 2px solid white;
  color: white;
}
<h1>My example Website</h1>

<div tabindex="0" class="menutop">
  <div class="menutop-dropdown">
    <a href="javascript:;">Link 1</a>
    <a href="javascript:;">Link 2</a>
    <a href="javascript:;">Link 3</a>
    <a href="javascript:;">Link 4</a>
    <a href="javascript:;">Link 5</a>
  </div>
</div>

user_193206680
Related