'I can't get my dropdown menu to work that I built with CSS. Problem with pointer-events

I am trying to build a dropdown menu in pure CSS. I am using the focus in CSS. I set it to pointer-events: all; on focus and pointer-events: none; when not on focus. The links show up but it starts pointer events none as soon as I click. Is there a way I could delay this or fix this issue?

CSS:

.link-dropdown {
  border-color: var(--transparent);
  background-color: var(--transparent);
}

.link-dropdown:hover {
  cursor: pointer;
}

.link-dropdown:focus + .dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0%);
}

.dropdown-menu {
  background-color: white;
  text-align: center;
  justify-content: space-around;
  align-items: center;
  pointer-events: none;
  opacity: 0;
  transform: tanslateY(-5%);
  transition: all .5s ease;
  position: absolute;
}

.dropdown-item {
  color: black;
  text-decoration: none;
  justify-content: center;
  align-items: center;
}

.flex {
  display: flex;
}

.column {
  flex-direction: column;
}

React:

{dropdownMenus.map(menu => (
                    <span className="dropdown-block">
                        <button className="link-dropdown" aria-label={menu.ariaLabel}>{menu.title}<i></i></button>
                        <div className="link-section dropdown-menu flex column">
                        {menu.linkInfo.map(newLink => (
                            <a href={newLink.href} className="dropdown-item" key={newLink.href}>{newLink.text}</a>
                        ))}
                        </div>
                    </span>
                ))}
htmlcss


Solution 1:[1]

I was able to fix this problem. What I did was use visibility: hidden; and visibility: visible; instead of pointer-events.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zachary-Elliott

Related Questions