行效果

技術(shù)要點

• 把元素進行隱藏 display: none;
• 鼠標經(jīng)過的偽元素選擇器，.user:hover div { display: block; }，鼠標經(jīng)過的時候，把隱藏的元素進行顯示；
• 顯示元素的轉(zhuǎn)換；使用dispaly, inline表示轉(zhuǎn)換為行內(nèi)元素，一行顯示；inline-block轉(zhuǎn)換為行內(nèi)塊元素，即有行內(nèi)元素的特點，又有塊級元素的特點；block轉(zhuǎn)換為塊級元素，獨占一行顯示
• 盒子模型
• 浮動以及浮動的特點，浮動可以有左浮動或右浮動；float: left；或float: right;

源碼

時制作網(wǎng)站導航時，經(jīng)常用到鼠標懸停展現(xiàn)下拉菜單的效果。在此記錄一下實現(xiàn)過程，需支持CSS3瀏覽器運行。

首先看下實現(xiàn)的效果：

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/">網(wǎng)站 - 定制品牌營銷網(wǎng)站</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/">轉(zhuǎn)化 - SEO優(yōu)化+網(wǎng)站運維</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 都是層疊覆蓋寫法。