On Hover, Show Links

Question

I've tried to create a hover effect to show links on the 'Guides', I want to it be something similar to the one on this site: https://www.codingnepalweb.com/, I managed to to only create the down arrow for it, however seem to be struggling with making the effect work using the :active and :hover pseudo classes.

nav ul>li.guide-down>a:after {
  content: '\f078';
  text-align: right;
  font-family: 'Font Awesome 5 Free';
  font-size: 9px;
  font-weight: 900;
  margin: -1px 0 0 5px;
}

nav ul>li>ul {
  position: absolute;
  float: left;
  left: 0;
  top: 60px;
  width: 180px;
  background-color: #1e232b;
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  padding: 0;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 15%), 0 2px 10px 0 rgb(0 0 0 / 17%);
}

.dropdown:hover {
  cursor: pointer;
}

.dropdown:active {
  background-color: #1E232B;
  cursor: progress;
}

.dropdown:hover+.dropdown-content {
  display: block;
}

<div id="mainListDiv" class="main_list">
  <ul class="navlinks">
    <li><a href="#">Post your Inquiry</a></li>
    <li><a href="#">Sell on Airduka</a></li>
    <li class="dropdown">
      <a href="#">Guides</a>
      <ul class="dropdown-content">
        <li><a href="#">How it Works</a></li>
        <li><a href="#">Buyer's Guide</a></li>
        <li><a href="#">Seller's Guide</a></li>
      </ul>
    </li>

    <li><a href="#">Sign-In</a></li>

This might guide you in the right direction: https://stackoverflow.com/questions/5210033/using-only-css-show-div-on-hover-over-a — thordarson, Apr 09 '21 at 08:08

thordarson · Answer 1 · 2021-04-11T16:56:46.310

Your problem seems to be that you're using an incorrect CSS selector. The + selector selects an element immediately following the one preceding it. This means that .dropdown:hover + .dropdown-content only select .dropdown-content if it comes right after a .dropdown that's being hovered. Also, you need to hide .dropdown-content when .dropdown is not being hovered.

While you're learning, it's a good idea to keep something like MDN's guide on selectors open, or find a CSS selector cheat sheet to keep handy.

You can fix this by either rewriting your CSS or rearranging your HTML.

.dropdown:hover {
  cursor: pointer;
}

.dropdown:active {
  background-color: #1E232B;
  cursor: progress;
}

/* Hide .dropdown-content by default. */
.dropdown-content {
  display: none;
}

/* Given your HTML, a child selector (>) works because you're selecting an element that's inside .dropdown. Note that this selector only select an element that's directly within .dropdown and not within another element inside .dropdown. */
.dropdown:hover>.dropdown-content {
  display: block;
}

<div id="mainListDiv" class="main_list">
  <ul class="navlinks">
    <li><a href="#">Post your Inquiry</a></li>
    <li><a href="#">Sell on Airduka</a></li>
    <li class="dropdown">
      <a href="#">Guides</a>
      <ul class="dropdown-content">
        <li><a href="#">How it Works</a></li>
        <li><a href="#">Buyer's Guide</a></li>
        <li><a href="#">Seller's Guide</a></li>
      </ul>
    </li>

    <li><a href="#">Sign-In</a></li>
  </ul>
</div>

On Hover, Show Links

1 Answers1