Darian Darian - 6 months ago 26
CSS Question

Css dropdown hover not working

This is a super simple question. But for the life of me, I have no clue why it isn't working. I feel quite ashamed!

I simply want the list to display when you hover on the a link.. Yet it doesnt work. I have done this a million times, but for some reason it's not working. Please let me know what I am doing wrong.

See snippets below -



.assist-label:hover .assist-list{
display: block;
}

.assist-list {
width: 100px;
background-color: #141825;
height: 0;
opacity: 0;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
display: none;
}

<div class="car-assist-container">
<a href="#" class="assist-label" id="label">Car Assistant</a>
<ul class="assist-list">
<li class="assist-item" id="carWorth">Car Worth</li>
<li class="assist-item browse">
Browse
<ul class="browse-list">
<li class="browse-item" id="browseMake">Makes</li>
<li class="browse-item" id="browseType">Types</li>
<li class="browse-item" id="browseYear">Year</li>
</ul>
</li>
<li class="assist-item">Compare</li>
</ul>
</div>




Answer Source

With this structure

<a href="#" class="assist-label" id="label">Car Assistant</a>
        <ul class="assist-list">

This

.assist-label:hover .assist-list{
   display: block;
  }

will not work because .assist-list is not a child of assist-label...it's a sibling

You want

.assist-label:hover + .assist-list{
       display: block;
      }

using the adjacent sibling selector.

Note: You will also have to amend the opacity of the list on hover.

.assist-label:hover+.assist-list {
  display: block;
  opacity: 1;
}

.assist-list {
  width: 100px;
  background-color: #141825;
  height: 0;
  opacity: 0;
  -moz-transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  display: none;
}
<div class="car-assist-container">
  <a href="#" class="assist-label" id="label">Car Assistant</a>
  <ul class="assist-list">
    <li class="assist-item" id="carWorth">Car Worth</li>
    <li class="assist-item browse">
      Browse
      <ul class="browse-list">
        <li class="browse-item" id="browseMake">Makes</li>
        <li class="browse-item" id="browseType">Types</li>
        <li class="browse-item" id="browseYear">Year</li>
      </ul>
    </li>
    <li class="assist-item">Compare</li>
  </ul>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download