Changing dropdown behavior to hover rather than onclick

Question

I have a dropdown on my page and I'm trying to show the dropdown by hovering on it rather than clicking it and I can't seem to make it work, here's what I did:

I changed this:

.dropdown:not(.show) {
 pointer-events: none;
 opacity: 0
}

to this:

.dropdown:hover {
 pointer-events: none;
 opacity: 0
}

Here's the whole CSS code:

.dropdown.share li:after, .fade-1 .content {
 background: rgba(0, 0, 0, .1)
}

.dropdown.show, .navigation li:hover:before {
 visibility: visible
}

.dropdown {
 position: fixed;
 z-index: 300;
 color: #202020;
 width: 160px;
 background: #fff;
 box-shadow: 0 6px 11px 0 rgba(0, 0, 0, .15), 0 14px 28px rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .05);
 margin-bottom: 50px;
 border-radius: 6px;
 text-align: center;
 cursor: default;
 -webkit-transform: translateY(0) scale(.9);
 transform: translateY(0) scale(.9);
 -webkit-transform-origin: top;
 transform-origin: top;
 transition: opacity .35s, box-shadow .35s, -webkit-transform .35s;
 transition: transform .35s, opacity .35s, box-shadow .35s;
 transition: transform .35s, opacity .35s, box-shadow .35s, -webkit-transform .35s
}
.dropdown:not(.show) {
 pointer-events: none;
 opacity: 0
}
.dropdown.rectangular {
 border-radius: 0
}
.dropdown .title {
 font-size: 17px;
 font-weight: 500;
 margin: 0;
 text-align: center;
 opacity: .8
}
.dropdown a {
 font-size: 15px;
 opacity: .6
}
.dropdown a:hover {
 color: #EF4D26;
}
.dropdown:not(.noArrow):after, .dropdown:not(.noArrow):before {
 content: "";
 bottom: 100%;
 left: 22px;
 border: solid transparent;
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;
 border-color: rgba(255, 255, 255, 0);
 border-bottom-color: #fff;
 border-width: 7px;
 margin-left: -7px
}
.dropdown:not(.noArrow):before {
 border-bottom-color: rgba(0, 0, 0, .1);
 border-width: 8px;
 margin-left: -8px
}
.dropdown.show {
 opacity: 1;
 -webkit-transform: translateY(20px);
 transform: translateY(20px)
}
.dropdown .hideDropdown, .dropdown.show.hide {
 opacity: 0;
 pointer-events: none
}
.dropdown.show.hide {
 -webkit-transform: translateY(40px);
 transform: translateY(40px);
 box-shadow: 0 0 0 0 rgba(0, 0, 0, .15), 0 0 0 rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .05)
}
.dropdown.bottom {
 -webkit-transform-origin: bottom;
 transform-origin: bottom
}
.dropdown.bottom.show {
 -webkit-transform: translateY(-20px);
 transform: translateY(-20px)
}
.dropdown.bottom.show.hide {
 -webkit-transform: translateY(-40px);
 transform: translateY(-40px)
}
.dropdown.bottom:after, .dropdown.bottom:before {
 top: 100%;
 bottom: initial;
 border-bottom-color: rgba(255, 255, 255, 0);
 border-top-color: #fff
}
.dropdown.bottom:before {
 border-top-color: rgba(0, 0, 0, .06)
}
.dropdown.right:after, .dropdown.right:before {
 right: 18px;
 left: auto
}
.dropdown.right:before {
 right: 17px
}
.dropdown.center:after, .dropdown.center:before {
 left: 50%
}
.dropdown.share li {
 float: left;
 text-align: center;
 display: block;
 width: 80px;
 height: 50px;
 padding: 14px 0;
 color: #fff;
 position: relative;
 cursor: pointer;
 opacity: .9;
 transition: .15s
}
.dropdown.share li:hover {
 opacity: 1
}
.dropdown.share li:after {
 content: " ";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 opacity: 0;
 transition: .25s
}
.dropdown.share li:active:after {
 opacity: 1;
 transition: .1s
}
.dropdown.share li svg {
 width: 20px;
 height: 20px;
 fill: #fff
}
.dropdown.share li.mail {
 width: 100%;
 height: auto;
 color: #202020;
 opacity: .6;
 font-size: 15px;
 padding: 20px 0;
 border-bottom-left-radius: 6px;
 border-bottom-right-radius: 6px
}
.dropdown.share li.mail:hover {
 opacity: .8
}
.scroll .dropdown {
 position: absolute;
 top: 0
}

And here's my HTML:

 <li class="dropdownTrigger" data-dropdown-hover="true" data-dropdown-id="dropdown-ourstory">
 <strong style="opacity: .8;">Our Story</strong>
 <i class="fas fa-chevron-down" style="font-size: 10px;">
 </i>
</li>

<!-- Dropdown -->
<div class="dropdown top customDropdown center globalFont" data-dropdown-id="dropdown-ourstory" style="padding: 10px; line-height: 2em;">
 <ul>
  <li class="link">
   <a href="about-us#theteamspanblueprint">
    <strong style="font-size: 17px;">Our Game Plan</strong>
   </a>
  </li>
  <li class="link">
   <a href="about-us#meettheteam">
    <strong style="font-size: 17px;">Our Team</strong>
   </a>
  </li>
  <li class="link">
   <a href="about-us#ourimpact">
    <strong style="font-size: 17px;">Our Impact</strong>
   </a>
  </li>
 </ul>
</div>

Is there javascript involved here as well? Is this bootstrap? May be duplicate of https://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click — Will P., Jun 14 '19 at 15:41
Possible duplicate of [How to make Twitter Bootstrap menu dropdown on hover rather than click](https://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click) — Will P., Jun 14 '19 at 15:41

Satyam Pathak · Answer 1 · 2019-06-14T15:58:17.143

You don't need JS for the above example as you dropdown is just later sibling of triggering element -

Update

Great Input by Julian that this will make links get hide the moment you move you cursor away from triggering element. For that I suggest you to wrap your elements to make sure you able to perform actions on links

here is another example

.dropdown {
  display: none;
}

.nav:hover .dropdown{
  display: block;
}

<div class="nav">
<li class="dropdownTrigger" data-dropdown-hover="true" data-dropdown-id="dropdown-ourstory"><strong style="opacity: .8;">Our Story</strong> <i class="fas fa-chevron-down" style="font-size: 10px;"></i></li>

<!-- Dropdown -->
<div class="dropdown top customDropdown center globalFont" data-dropdown-id="dropdown-ourstory" style="padding: 10px; line-height: 2em;">
  <ul>
    <li class="link"><a href="about-us#theteamspanblueprint"><strong style="font-size: 17px;">Our Game Plan</strong></a></li>
    <li class="link"><a href="about-us#meettheteam"><strong style="font-size: 17px;">Our Team</strong></a></li>
    <li class="link"><a href="about-us#ourimpact"><strong style="font-size: 17px;">Our Impact</strong></a></li>
  </ul>
</div>

</div>

Try this -

.dropdown {
  display: none;
}

.dropdownTrigger:hover ~ .dropdown {
  display: block;
}

<li class="dropdownTrigger" data-dropdown-hover="true" data-dropdown-id="dropdown-ourstory"><strong style="opacity: .8;">Our Story</strong> <i class="fas fa-chevron-down" style="font-size: 10px;"></i></li>

<!-- Dropdown -->
<div class="dropdown top customDropdown center globalFont" data-dropdown-id="dropdown-ourstory" style="padding: 10px; line-height: 2em;">
  <ul>
    <li class="link"><a href="about-us#theteamspanblueprint"><strong style="font-size: 17px;">Our Game Plan</strong></a></li>
    <li class="link"><a href="about-us#meettheteam"><strong style="font-size: 17px;">Our Team</strong></a></li>
    <li class="link"><a href="about-us#ourimpact"><strong style="font-size: 17px;">Our Impact</strong></a></li>
  </ul>
</div>

Should I remove all dropdown css and replace it with the only 2 css? — Renzo, Jun 14 '19 at 15:48
@Renzo No obviously not, you jst use the way I am using it. Add these CSS instead replacing it — Satyam Pathak, Jun 14 '19 at 15:50
So I tried adding it to my css code, but nothing happens when I click nor hover on it. Probably because of the display none? Sorry — Renzo, Jun 14 '19 at 15:54
It works, but I'd have to click the menu first then hover on it. It's kinda weird but ya I get your point — Renzo, Jun 14 '19 at 16:01
I had updated my answer, please also look on it. Happy to help :) Accept the answer if it helps for you — Satyam Pathak, Jun 14 '19 at 16:04

Changing dropdown behavior to hover rather than onclick

1 Answers1