瑕佸疄鐜颁笅鎷夎彍鍗曞姛鑳斤紝鍙互浣跨敤jQuery鐨勪簨浠跺拰CSS鏍峰紡鏉ュ疄鐜般€備互涓嬫槸涓€涓畝鍗曠殑绀轰緥锛?/p>

HTML浠ｇ爜锛?/p>

<div class="dropdown">
<button class="dropdown-toggle" data-toggle="dropdown">涓嬫媺鑿滃崟</button>
<ul class="dropdown-menu">
<li><a href="#">閫夐」1</a></li>
<li><a href="#">閫夐」2</a></li>
<li><a href="#">閫夐」3</a></li>
</ul>
</div>

CSS鏍峰紡锛?/p>

.dropdown .dropdown-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown .dropdown-toggle {
background-color: #f9f9f9;
border: none;
color: black;
padding: 8px 16px;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.dropdown:hover .dropdown-menu {
display: block;
}

JavaScript浠ｇ爜锛?/p>

$(document).ready(function() {
$('.dropdown-toggle').click(function() {
$('.dropdown-menu').toggle();
});
});

鍦ㄨ繖涓ず渚嬩腑锛岀偣鍑绘寜閽椂锛屼娇鐢╰oggle()鏂规硶鏉ュ垏鎹笅鎷夎彍鍗曠殑鏄剧ず鍜岄殣钘忕姸鎬併€傚悓鏃朵娇鐢–SS鏍峰紡鏉ヨ缃笅鎷夎彍鍗曠殑浣嶇疆銆佽儗鏅壊绛夋牱寮忋€?/p>