Question

我想制作一个下拉菜单转换，但它根本不起作用。其他转换工作正常，但这个过程非常顽固。我究竟做错了什么？

在此示例中，下拉列表在显示时不会转换：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我终于使用visibility：hidden和visibility：visible而不是display：none和display：block。谢谢您的帮助！这就是它现在的样子：

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

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

CSS下拉转换不起作用

1 个答案: