平时制作网站导航时，经常用到鼠标悬停展现下拉菜单的效果。在此记录一下实现过程，需支持CSS3浏览器运行。
首先看下实现的效果：
html部分：
<ul class="navbar-nav ml-auto">
<li class="nav-item hvr-underline-from-left nav-item1"><a class="nav-link hvr-icon-spin fa-caret-down" href="/solutions/">建站推广方案</a>
<div class="list-group shadow-sm ">
<a class="list-group-item list-group-item-action" href="/solutions/diagnosis/">分析 - 诊断分析/营销定位</a><a class="list-group-item list-group-item-action" href="/solutions/customize/">网站 - 定制品牌营销网站</a><a class="list-group-item list-group-item-action" href="/solutions/sem/">流量 - Google SEM 广告引流</a><a class="list-group-item list-group-item-action" href="/solutions/seo/">转化 - SEO优化+网站运维</a><a class="list-group-item list-group-item-action" href="/solutions/social/">社交 - Facebook/Youtube 运营推广</a><a class="list-group-item list-group-item-action" href="/solutions/training/">培训 - 线上线下课程免费送</a>
</div>
</li>
<li class="nav-item hvr-underline-from-left nav-item2"><a class="nav-link " href="/cases/">成功案例</a>
</li>
</ul>重点CSS部分：
.nav-menu .navbar-collapse>.navbar-nav>li>.list-group {
position: absolute;
z-index: 1070;
width: auto;
left: 0;
overflow: hidden;
height: auto;
max-height: 0;// 最大高度初始为0
transition: all .3s ease; //效果时间 0.3s
visibility: hidden;
}
.nav-menu .navbar-collapse>.navbar-nav>li:hover>.list-group,.nav-menu .navbar-collapse>.navbar-nav>li>a:hover +.list-group {
max-height: 100vh; // 鼠标悬停时最大高度尽量大点，就有向下展开的动画效果
visibility: visible;
height: auto;
}我的代码引用了 bootstrap v4 所以有些class 都是层叠覆盖写法。