css3響應(yīng)式的圖標(biāo)導(dǎo)航懸停菜單代碼

使用方法：

1、head引入css文件

<link href="css/index.css" rel="stylesheet">

2、body引入HTML代碼

<div class="t-mian1C">
	<!-- 學(xué)院SPU -->
	<div class="t-mianCon clearfloat" id="spu-list">
		<div class="t-mainsku">
			<div>
				<img src="images/20180308051003950acc_icon.png" class="mt30">
				<p class="t-text" style="color: rgb(53, 212, 143);">
					會計(jì)學(xué)院
				</p>
			</div>
			<div class="skuShow ">
				<p class="t-miantit" style="color: rgb(53, 212, 143);">
					會計(jì)學(xué)院
				</p>
				<div class="t-gang">
				</div>
				<a href="#" class="sku-mr" >會計(jì)初級職稱</a>
				<a href="#" class="sku-mr" >會計(jì)中級職稱</a>
				<a href="#" class="sku-mr" >注冊會計(jì)師</a>
				<a href="#" class="sku-mr" >美國管理會計(jì)師</a>
			</div>
		</div>
		<div class="t-mainsku">
			<div>
				<img src="images/20180308051010497teacher_icon.png" class="mt30">
				<p class="t-text" style="color: rgb(53, 212, 143);">
					教師學(xué)院
				</p>
			</div>
			<div class="skuShow ">
				<p class="t-miantit" style="color: rgb(53, 212, 143);">
					教師學(xué)院
				</p>
				<div class="t-gang">
				</div>
				<a href="#" class="sku-mr" >幼兒教師資格證</a>
				<a href="#" class="sku-mr" >幼兒教師招聘</a>
				<a href="#" class="sku-mr" >小學(xué)教師資格證</a>
				<a href="#" class="sku-mr" >小學(xué)教師招聘</a>
				<a href="#" class="sku-mr" >中學(xué)教師資格證</a>
				<a href="#" class="sku-mr" >中學(xué)教師招聘</a>
			</div>
		</div>
		<div class="t-mainsku">
			<div>
				<img src="images/20180308051121519HR_icon.png" class="mt30">
				<p class="t-text" style="color: rgb(53, 212, 143);">
					人力學(xué)院
				</p>
			</div>
			<div class="skuShow ">
				<p class="t-miantit" style="color: rgb(53, 212, 143);">
					人力學(xué)院
				</p>
				<div class="t-gang">
				</div>
				<a href="#" class="sku-mr" >人力資源初級職稱</a>
				<a href="#" class="sku-mr" >人力資源中級職稱</a>
				<a href="#" class="sku-mr" >人力管理師三級</a>
			</div>
		</div>
		<div class="t-mainsku">
			<div>
				<img src="images/201803080510289gwy.png" class="mt30">
				<p class="t-text" style="color: rgb(53, 212, 143);">
					公務(wù)員學(xué)院
				</p>
			</div>
			<div class="skuShow skuLie">
				<p class="t-miantit" style="color: rgb(53, 212, 143);">
					公務(wù)員學(xué)院
				</p>
				<div class="t-gang">
				</div>
				<a href="#" class="sku-mr" >國家公務(wù)員</a>
				<a href="#" class="sku-mr" >地方公務(wù)員</a>
			</div>
		</div>
		<div class="t-mainsku">
			<div>
				<img src="images/20180308051015405IT_icon.png" class="mt30">
				<p class="t-text" style="color: rgb(53, 212, 143);">
					IT技能學(xué)院
				</p>
			</div>
			<div class="skuShow ">
				<p class="t-miantit" style="color: rgb(53, 212, 143);">
					IT技能學(xué)院
				</p>
				<div class="t-gang">
				</div>
				<a href="#" class="sku-mr" >平面設(shè)計(jì)</a>
				<a href="#" class="sku-mr" >室內(nèi)設(shè)計(jì)</a>
				<a href="#" class="sku-mr" >小程序開發(fā)</a>
				<a href="#" class="sku-mr" >Office辦公軟件</a>
				<a href="#" class="sku-mr" >計(jì)算機(jī)二級</a>
			</div>
		</div>
		<div class="t-mainsku">
			<div>
				<img src="images/20180308051106603english_icon.png" class="mt30">
				<p class="t-text" style="color: rgb(53, 212, 143);">
					外語學(xué)院
				</p>
			</div>
			<div class="skuShow ">
				<p class="t-miantit" style="color: rgb(53, 212, 143);">
					外語學(xué)院
				</p>
				<div class="t-gang">
				</div>
				<a href="#" class="sku-mr" >英語四級</a>
				<a href="#" class="sku-mr" >英語六級</a>
				<a href="#" class="sku-mr" >韓語入門</a>
				<a href="#" class="sku-mr" >日語入門</a>
			</div>
		</div>
		<div class="t-mainsku">
			<div>
				<img src="images/20180308051115328xz_icon.png" class="mt30">
				<p class="t-text" style="color: rgb(53, 212, 143);">
					自考學(xué)院
				</p>
			</div>
			<div class="skuShow ">
				<p class="t-miantit" style="color: rgb(53, 212, 143);">
					自考學(xué)院
				</p>
				<div class="t-gang">
				</div>
				<a href="#" class="sku-mr" >會計(jì)?？?lt;/a>
				<a href="#" class="sku-mr" >會計(jì)本科</a>
				<a href="#" class="sku-mr" >行政管理?？?lt;/a>
				<a href="#" class="sku-mr" >行政管理本科</a>
				<a href="#" class="sku-mr" >漢語言文學(xué)?？?lt;/a>
				<a href="#" class="sku-mr" >漢語言文學(xué)本科</a>
			</div>
		</div>
		<div class="t-mainsku">
			<div>
				<img src="images/20180308051041218jinrong_icon.png" class="mt30">
				<p class="t-text" style="color: rgb(53, 212, 143);">
					金融學(xué)院
				</p>
			</div>
			<div class="skuShow ">
				<p class="t-miantit" style="color: rgb(53, 212, 143);">
					金融學(xué)院
				</p>
				<div class="t-gang">
				</div>
				<a href="#" class="sku-mr" >證券一般從業(yè)</a>
				<a href="#" class="sku-mr" >證券專項(xiàng)</a>
				<a href="#" class="sku-mr" >基金從業(yè)</a>
				<a href="#" class="sku-mr" >銀行從業(yè)</a>
			</div>
		</div>
		<div class="t-mainsku">
			<div>
				<img src="images/20180308051046601jianzhu_icon.png" class="mt30">
				<p class="t-text" style="color: rgb(53, 212, 143);">
					工程學(xué)院
				</p>
			</div>
			<div class="skuShow skuLie">
				<p class="t-miantit" style="color: rgb(53, 212, 143);">
					工程學(xué)院
				</p>
				<div class="t-gang">
				</div>
				<a href="#" class="sku-mr" >一級建造師</a>
				<a href="#" class="sku-mr" >二級建造師</a>
				<a href="#" class="sku-mr" >一級消防工程師</a>
			</div>
		</div>
		<div class="t-mainsku">
			<div>
				<img src="images/2018030805111248qz_icon.png" class="mt30">
				<p class="t-text" style="color: rgb(53, 212, 143);">
					求職/司法學(xué)院
				</p>
			</div>
			<div class="skuShow skuLie">
				<p class="t-miantit" style="color: rgb(53, 212, 143);">
					求職/司法學(xué)院
				</p>
				<div class="t-gang">
				</div>
				<a href="#" class="sku-mr" >司法考試</a>
				<a href="#" class="sku-mr" >求職輔導(dǎo)</a>
			</div>
		</div>
	</div>
</div>