CSS实践：hover伪类与延时实现下拉列表

实现一个鼠标经过按钮来展示下拉菜单的交互效果：

<button class='btn'>菜单</button>
<ul class='panel'>
  <li class='panel-item'>苹果</li>
  <li class='panel-item'>葡萄</li>
  <li class='panel-item'>香蕉</li>
  <li class='panel-item'>橙子</li>
</ul>
复制代码

目标是鼠标经过按钮时，下拉菜单展示。css代码很简单：

.btn:hover + .panel, .panel:hover{
  visibility: visible
}
.panel{
  visibility: hidden;
  width: 100px;
  height: 200px;
  background: #DDD;
}
.panel-item{
  width: 100%;
  height: 50px;
  list-style: none;
  line-height: 50px;
}
复制代码

然而上面的实现有一个小缺陷，如果按钮与菜单之间有空隙，鼠标还没移动到下拉框上时，下拉框就已经收起来了。借助transition增加延时效果就可以解决这个问题。

只需要在.panel增加如下属性即可:

.panel{
	transition: visibility .2s;
}
复制代码

效果图如下：