HTML、二级弹框

很多网页上面的导航栏都有二级弹框的效果。下面是实现的方法。

二级弹框效果图：

 

第一种方法： 

使用display的方法。 

ul li .box1{
  position: absolute; 
  top: 45px;
  left: 20px;
  border: .5px solid #00D0D4;
  border-top: 0;
  display: none;
}

使用绝对定位把弹框定位到对应的位置，然后用display，把值设为none隐藏弹框。

ul li:hover>.box1{
    display: block;
}

给需要弹框元素设置一个hover的效果，找到它下面的弹框盒子，用display:block把隐藏的弹框显示出来。

部分html代码：

但是这种方法，弹框出现的会比较生硬，视觉效果一般。

第二种方法：

使用height，配合动画实现。这种方法就会比上面好，我们一般都会用这种方法。

ul li .box1{
    width: 124px;
    height: 0px;
    position: absolute; 
    top: 45px;
    left: 20px;
    overflow: hidden;
    transition: all .3s;
    z-index: 10;
}

这种方法需要给盒子一个高，需要把height设置为0px，然后使用overflow:hidden把盒子里的内容隐藏掉。再加一个transition属性实现一个动画的效果。

ul li:hover>.box1{
    height: 140px;
}

把高度设置回来，让盒子显现出来。