နောက်ကြွေး လမ်းကြောင်း အုပ်ချုပ် ဖွင့်ပုံ

နောက်ကြွေး လမ်းကြောင်း အုပ်ချုပ် ဖွင့်ပုံ လေ့လာပါ

နောက်ကြွေး လမ်းကြောင်း အုပ်ချုပ် ဖွင့်ပါ

အသုံးပြုသူ လမ်းကြောင်းအုပ်ချုပ် အသုံးပြုသော အရာတွင် နောက်ကြွေး ဖွင့်လာကြောင်း ဖော်ထုတ်လိမ့်မည်

ပထမပိုင်း - အစီအစဥ် HTML ထပ်ပေါင်းပြီ

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown</button>
      <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>
</div>

အကျုပ် အချက်အလက်

အကွန့် အသုံးပြု၍ နောက်ကြွေး အကွန့် ဖွင့်ပါ၍ ဥပမာ <button> အဖွဲ့အစည်း အသုံးပြု၍ နောက်ကြွေး အကွန့် ဖွင့်ပါ၍ ဥပမာ <a> အဖွဲ့အစည်း အသုံးပြု၍ နောက်ကြွေး အကွန့် ဖွင့်ပါ၍ ဥပမာ <p> အဖွဲ့အစည်း အသုံးပြု၍ နောက်ကြွေး အကွန့် ဖွင့်ပါ၍

အကွန့် အဖွဲ့အစည်း (ဥပမာ <div>) အသုံးပြု၍ နောက်ကြွေး လမ်းကြောင်း အသုံးပြု၍ နောက်ကြွေး လမ်းကြောင်း အသုံးပြု၍ ပေါင်းစပ်ပါ。

ဘွတ် <div> အဖွဲ့အစည်း အသုံးပြု၍ နောက်ကြွေး အသုံးပြု၍ နောက်ကြွေး အကွန့် အချွန်းကြောင်း အသားချွန်းကြောင်း ပြုလုပ်ပါ。

ဒုတိယပိုင်း - အစီအစဥ် CSS ထပ်ပေါင်းပြီ

/* လမ်းကြောင်းအုပ်ချုပ် အကွန့် */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* လမ်းကြောင်းအုပ်ချုပ် အသုံးပြု */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* နောက်ကြွေး အကွန့် */
.dropdown {
  float: left;
  overflow: hidden;
}
/* နောက်ကြွေးကိုကူး */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* လူကြီးများ တွင် အဆန့်အယူအသား အသားချွန်းကြောင်း အရေးကြီး */
  margin: 0; /* 对于手机上的垂直对齐很重要 */
}
/* 在鼠标悬停时为导航栏链接添加红色背景色 */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* နေရာချယ် လျှောက်ချက် အချက်အလက် (ပြီးပိုင်း ဖုံးကွဲခြင်း) */
.dropdown-content {
  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-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* မိုးစင်းချိုး အခါ နေရာချယ် လျှောက်ချက် ဆက်သွယ် အချက်အလက် ကို အသုံးပြု */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* မိုးစင်းချိုး အခါ နေရာချယ် လျှောက်ချက် ပြုလုပ် */
.dropdown:hover .dropdown-content {
  display: block;
}

သင့်ကို ကြိုးစားလုပ်ပါ

အကျုပ် အချက်အလက်

နေရာချယ် လျှောက်ချက် နှင့် နေရာချယ် လျှောက်ချက် ဆက်သွယ် အချက်အလက် ကို အသုံးပြုပါ

နေရာချယ် လျှောက်ချက် အချက်အလက် အသုံးပြုပြီး အခြား အရာတို့ အချက်အလက် ကို အသုံးပြုပါ

.dropdown အကျုပ် အချက်အလက် .dropdown-content အကျုပ် အချက်အလက်

.dropdown-content အကျုပ် အချက်အလက် ကို အသုံးပြုပြီး အသုံးပြုသူ မိုးစင်းချိုး အခါ နေရာချယ် လျှောက်ချက် ပြုလုပ်သည်။ သို့သော် အသုံးပြုသူ မိုးစင်းချိုး အခါ အမြင့်တူ နေရာ အရေအတွက် 160px အသုံးပြုပါ။ ဤ အစီအစဥ် ကို ကျော်ကြီး ပြောင်းလဲနိုင်ပါ

နေရာချယ် လျှောက်ချက် အခြေအား အသုံးပြုခြင်း မရှိ မှာ အခြား အကျုပ် အချက်အလက် ကို အသုံးပြုပါ box-shadow အကျုပ် အချက်အလက် ကို အသုံးပြုပြီး နေရာချယ် လျှောက်ချက် ကို ကလေးကြီး နေရာချယ် လျှောက်ချက် ကဲ့သို့ ပြုပြီး ကျော်ကြီး သုံးပြီးပြီ z-index နေရာချယ် လျှောက်ချက် ကို အခြား အရာတို့ အလိုက် နေရာချယ် လျှောက်ချက် အား ထည့်သွင်းပါ

:hover နေရာချယ် လျှောက်ချက် အမြင့်တူ နေရာ ကို အသုံးပြုပြီး အသုံးပြုသူ မိုးစင်းချိုး အခါ နေရာချယ် လျှောက်ချက် ပြုလုပ်သည်။

နေရာချယ် လျှောက်ချက် အမြင့်တူ နေရာ

သင့်ကို ကြိုးစားလုပ်ပါ

ပါဝင်သော စာမျက်နှာ

ပြည်ထောင်စုCSS 下拉菜单

ပြည်ထောင်စုတိုက်ရိုက်လုပ်ပေးရန် နေရာချယ် လျှောက်ချက်

ပြည်ထောင်စုCSS 导航栏

ပြည်ထောင်စုတိုက်ရိုက်လုပ်ပေးရန် ပြောင်းလဲနိုင်သော အမြင့်တူ အမြင့်ချိုး နေရာ