အက်ပ်စ် အုပ်ချုပ် ဘေ့စ် ဖွင့်လုပ်မှု

အက်ပ်စ် အုပ်ချုပ် ဘေ့စ် ဖွင့်လုပ်မှု ကို အုပ်ချုပ်လုပ်ကိုင်ပါ။

အက်ပ်စ် အုပ်ချုပ် ဘေ့စ် ဖွင့်လုပ်မှု

ပထမ အစက် - HTML ထပ်ထည့်ပါ။

အရာတစ်ခု အောက်မှ အရာတစ်ခု ဖြတ်တောက် ပြီး အက်ပ်စ် ပြတ်တောက် ဖြိုဖြိုမှ အောက်မှ ပြောင်းပြီး ပြတ်တောက် ပြုလုပ်ပါ။

<!-- Font Awesome 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="btn">Button</button>
<div class="dropdown">
  <button class="btn" style="border-left:1px solid navy">
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

အကြောင်းအရာ ဖော်ပြချက်：

နှိပ်တဲ့ အရာများ အား အုပ်ချုပ်ကြည့်ပါ နှိပ်တဲ့ <button>、<a> သို့မဟုတ် <p> အရာများ အား အုပ်ချုပ်ပါ

နှိပ်တဲ့ အရာများ အား အုပ်ချုပ်ကြည့်ပါ နှိပ်တဲ့ လက်ဆုံး တင်ဆက် အချင်းပြောင်းလဲပါ

နှိပ်တဲ့ <div> အရာများ ကို နှိပ်တဲ့ <div> အရာများ အား အုပ်ချုပ်ကြည့်ပါ အစီအစဉ် CSS အသုံးပြုပါ

ဒုတိယ သုံးစွဲ ကြည့်ပါ - အစီအစဉ် CSS ထပ်ပေါင်းပါ

/* နှိပ်တဲ့ လက်ဆုံး တင်ဆက် */
.btn {
  background-color: #2196F3;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  outline: none;
}
/* ကွန်ပို့ကွင်း <div> - နှိပ်တဲ့ လက်ဆုံး တင်ဆက် အချင်းပြောင်းလဲပါ */
.dropdown {
  position: absolute;
  display: inline-block;
}
/* နှိပ်တဲ့ လက်ဆုံး တင်ဆက် လက်ဆုံး ပြောင်းလဲပါ */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
}
/* နှိပ်တဲ့ လက်ဆုံး တင်ဆက် */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* မိုးစက် လက်ဆုံး လက်ဆုံး ပြား အမှတ် ပြောင်းလဲလာပါ */
.dropdown-content a:hover {background-color: #ddd}
/* မိုးစက် လက်ဆုံး လက်ဆုံး ပြား ပြောင်းလဲလာပါ */
.dropdown:hover .dropdown-content {
  display: block;
}
/* နှိပ်တဲ့ ကျင်းစား လာပါတယ် နှိပ်တဲ့ လက်ဆုံး တင်ဆက် ကျင်းစား အသုံးပြုပါ */
.btn:hover, .dropdown:hover .btn  {
  background-color: #0b7dda;
}

ကိုယ်တိုင် ကြိုးစား ကြည့်ပါ

相关页面

教程：CSS 下拉菜单

教程：如何创建可点击的下拉菜单