HTML5倒三角下拉菜單代碼

<style>
/* 隱藏下拉菜單 */
.dropdown-menu{
display:none;
}
/* 顯示下拉菜單 */
.dropdown:hover .dropdown-menu {
display:block;
}
/* 添加倒三角 */
.dropdown-toggle::after {
content:" ";
display:inline-block;
width:0;
height:0;
border-top:5px solid #555;
border-right:5px solid transparent;
border-left:5px solid transparent;
margin-left:5px;
}
</style>
<div class="dropdown">
<button class="dropdown-toggle">下拉菜單</button>
<ul class="dropdown-menu">
<li>菜單項(xiàng)1</li>
<li>菜單項(xiàng)2</li>
<li>菜單項(xiàng)3</li>
</ul>
</div>

以上代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的下拉菜單，當(dāng)鼠標(biāo)移到"下拉菜單"按鈕上時(shí)，將顯示一列選項(xiàng)菜單，并在按鈕右側(cè)添加倒三角。