letou

純CSS實現折疊菜單下拉菜單

大寶 1121 0

萊蕪網站排名的大寶給大家介紹一種純CSS實現下拉菜單、純CSS實現折疊菜單的方法,直接上代碼:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.renyuan {display: none;}			
			.bm:hover .renyuan {display: block;}
			.bmt{background-color: aquamarine;}
		</style>
	</head>

<body>

	<div class="bm">
		<div class="bmt">部門1</div>
		<div class="renyuan">
			<div>人員1</div>
			<div>人員2</div>
			<div>人員3</div>
		</div>
	</div>
	<div class="bm">
		<div class="bmt">部門1</div>
		<div class="renyuan">
			<div>人員1</div>
			<div>人員2</div>
			<div>人員3</div>
		</div>
	</div>	
			
</body>
</html>

萊蕪網站排名給您提供代碼效果動態圖。

純CSS實現折疊菜單下拉菜單-第1張圖片-萊蕪網站制作中心

DIV追加寬度和float屬性,就可以橫向排列嘍

.bm{width:100px;float: left; margin: 10px;}

純CSS實現折疊菜單下拉菜單-第2張圖片-萊蕪網站制作中心

好了,萊蕪做網站的大寶就給你演示到這里了,如果有任何問題,可以留言本留言哦。如果需要做網站排名,請電話聯系。

發表評論 (已有0條評論)

還木有評論哦,快來搶沙發吧~

黑彩时时彩