CODEWITHSUNDEEP
htmlcss
user7779924
user7779924

Reputation:

Dropdown hover not working

I want the list to display when you hover on the a link. Yet it doesnt work.

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>

Upvotes: 0

Views: 33

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

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>

Upvotes: 2

Related Questions