मैंने इस ट्यूटोरियल का अनुसरण करने का प्रयास किया है, लेकिन मैं इसका पता नहीं लगा सकता नेविगेशन बार में ड्रॉपडाउन बटन पर होवर करते समय ड्रॉपडाउन मेनू बिल्कुल दिखाई नहीं देगा।

यह कोड का HTML हिस्सा है:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>

<div id="main-container">

  <div id="navbar" class="navbar">
        <a href="newsale.php" class="new_sale">New</a>
        <a href="sales.php">Sales</a>
        <a href="account.php">Account</a>
        
        <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <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>
    
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
    
</div>
</body>
</html>

यह कोड का सीएसएस हिस्सा है:

html {
    height: 100%;
}
 
body {
  margin: 0;
  height: 100%;
  font-family: "Poppins", sans-serif;
  background-color: #00ff00;
}

#main-container {
    padding: 16px;
    margin-top: 30px;
}

#navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 30px;
  z-index: 9999;
}

#navbar a.active {
  text-decoration: underline;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.new_sale {
    background-color: green;
}

.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;
}
0
Carben 25 जिंदा 2021, 17:05
यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं तो आपको उस पर अपना स्वयं का सीएसएस तेज़ नहीं करना चाहिए। इसके अलावा, कृपया अपने बूटस्ट्रैप संस्करण को टैग करें।
 – 
isherwood
25 जिंदा 2021, 17:29

1 उत्तर

सबसे बढ़िया उत्तर

समस्या यह है कि आप उस सामग्री को छुपा रहे हैं जो आपके नेवबार और ड्रॉपडाउन की सीमाओं को पार कर जाती है।

आपको हटाने की जरूरत है

overflow: hidden;

अपनी #navbar और .dropdown कक्षा से, इस fiddle को चेक करें

0
Dario 25 जिंदा 2021, 17:20
ओह, मैं उसके बारे में पूरी तरह से भूल गया। लेकिन overflow को हटाने के बाद - अगर मैं उस पर बैकग्राउंड-कलर का उपयोग करता हूं तो नेवबार के बटन नेवबार से बड़े क्यों हो जाते हैं? मैं इससे कैसे बच सकता हूं?
 – 
Carben
25 जिंदा 2021, 17:30
आप यहां देख सकते हैं: ibb.co/PD0yHmD । हरे रंग का हमेशा पृष्ठभूमि रंग होता है, और लाल रंग तब होता है जब मैं होवर करता हूं।
 – 
Carben
25 जिंदा 2021, 17:31
ऐसा इसलिए होता है क्योंकि बटन नेवबार से ऊंचे होते हैं। बस नेवबार की ऊंचाई 54px पर सेट करें और इसे काम करना चाहिए (मैंने अपनी पहेली को अपडेट किया है, आप इसे फिर से देख सकते हैं)। वैकल्पिक रूप से, नेवबार की ऊंचाई से मेल खाने के लिए अपने .navbar a वर्ग के लंबवत पैडिंग को कम करें।
 – 
Dario
25 जिंदा 2021, 17:32