CODEWITHSUNDEEP
htmlcss
Denki
Denki

Reputation: 363

CSS drop-down transition doesn't work

I want to make a drop-down menu transition, but it doesn't work at all. Other transitions work just fine but this one is really stubborn. What exactly am I doing wrong ?

In this example, the drop-down does not transition when it is shown:

a {
  color: #FFF;
  text-decoration: none;
}
li {
  height: 20px;
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 17px;
  color: #FFF;
  display: inline-block;
  vertical-align: top;
  background-color: #4CA0DB;
}
li:hover {
  transition: all 0.3s;
  background-color: #4CA0DB;
}
.carret {
  position: relative;
  margin-left: 5px;
  bottom: 1px;
  font-size: 12px;
}
/*this is where it breaks*/

.menu-hover ul li {
  display: none;
}
.menu-hover:hover ul li {
  background-color: #4CA0DB;
  display: block;
}
.menu-hover ul {
  transition: all 0.3s ease;
}
<nav>
  <ul>
    <li class="menu-hover"><a href="#">ABOUT THE UNIVERSITY<span class="carret">&#9660;</span></a>
      <ul class="dropdown">
        <li>
          <a href="#"></a>За нас</li>
        <li>
          <a href="#"></a>Професии</li>
        <li>
          <a href="#"></a>Планове</li>
        <li>
          <a href="#"></a>Специалности</li>
        <li>
          <a href="#"></a>Преподаватели</li>
        <li>
          <a href="#"></a>Финансиране</li>
        <li>
          <a href="#"></a>Кандидатстване</li>
      </ul>
    </li>
  </ul>
</nav>

Upvotes: 0

Views: 438

Answers (1)

Denki
Denki

Reputation: 363

I finally got it working by using visibility: hidden and visibility: visible instead of display: none and display: block. Thanks for the help! This is how it looks now: 

.menu-hover ul li {
display: block;
visibility: hidden;
}

.menu-hover:hover ul li {
background-color: #4CA0DB;
visibility: visible;
transition: all 0.3s ease;
}

Upvotes: 1

Related Questions