ఎలా సృష్టించాలి: నేవిగేషన్ బార్‌లోని "మరిన్ని" బటన్

మరిన్ని బటన్ సృష్టించడానికి తెలుసుకోండి

డౌన్‌లోడ్ మెనూ నేవిగేషన్ బార్ సృష్టించండి

వినియోగదారుడు నేవిగేషన్ బార్‌లోని అంశాన్ని మౌస్ చేర్చినప్పుడు డౌన్‌లోడ్ మెనూ కనిపిస్తుంది.

మొదటి చర్య - హెచ్ఎంఎల్ జోడించండి:

<div class="navbar">
  <a href="#home">హోమ్</a>
  <a href="#news">వార్తలు</a>
  <div class="dropdown">
    <button class="dropbtn">మరిన్ని
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">లింక్ 1</a>
      <a href="#">లింక్ 2</a>
      <a href="#">లింక్ 3</a>
    </div>
  </div>
</div>

ఉదాహరణ వివరణం:

డౌన్‌లోడ్ మెనూను తెరిచే ఏ అంశాన్ని ఉపయోగించండి, ఉదా <button>, <a> లేదా <p> అంశాలు.

కంటైనర్ అంశాన్ని (ఉదా <div>) ఉపయోగించి డౌన్‌లోడ్ మెనూను సృష్టించండి మరియు డౌన్‌లోడ్ మెనూ లింకులను లోపల జోడించండి.

బటన్‌ను మరియు మరొక <div> అంశాన్ని ఒక <div> అంశంతో మూసి పెట్టండి మరియు డౌన్‌లోడ్ మెనూను సరైనటువంటి స్థానాన్ని పొందండి.

రెండవ చర్య - సిఎస్ఎస్ జోడించండి:

/* నేవిగేషన్ బార్ కంటైనర్ */
.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 కంటైనర్. ఈ కంటైనర్ ఒక <div> ఎలిమెంట్ కాకుండా, <a> ఎలిమెంట్ కావడంతో, ఇది లింక్ పక్కన ఉండేందుకు ఫ్లోట్ చేయాలి.

.dropdown-content క్లాస్ డ్రాప్ డౌన్ మెనూను కలిగించాము. ఇది డిఫాల్ట్గా దాచి ఉంటుంది మరియు మౌస్ హోవర్ చేసినప్పుడు చూపిస్తుంది (కింద చూడండి). శ్రద్ధ వహించండి, కనీస వెడల్పు 160px నిర్ధారించబడింది. ఈ సెట్టింగ్ మార్చండి సరఫరాగా.

బార్డర్ వాడకం లేకుండా, బదులుగా box-shadow అనునది డ్రాప్ డౌన్ మెనూను ఒక కార్డ్ వలె చూడబడుతుంది. మనం కూడా z-index డ్రాప్ డౌన్ మెనూను ఇతర కెలియక్కి ముందుకు చొందించండి。

:hover డ్రాప్ డౌన్ మెనూను మౌస్ పించినప్పుడు చూపించే సెలెక్టర్

సంబంధిత పేజీలు

శిక్షణా పత్రం：CSS 下拉菜单

శిక్షణా పత్రం：క్లిక్ చేయగల డ్రాప్ డౌన్ మెనూ సృష్టించండి ఎలా

శిక్షణా పత్రం：CSS 导航栏

శిక్షణా పత్రం：రెస్పాన్సివ్ టాప్ నేవిగేషన్ బార్ సృష్టించండి ఎలా