5
यह स्टैक ओवरफ़्लो में मेरी पहली पोस्ट है और मैं पोस्टिंग के साथ फोरम नियमों से परिचित नहीं हूं। तो कृपया मुझे कुछ भी बताएं जो मैंने गलत किया है। मैंने इस मुद्दे पर मंचों पर शोध किया है और कुछ भी नहीं जो मैंने पार किया है, मुझे एक स्पष्ट उत्तर देता है।एचटीएमएल सीएसएस ड्रॉपडाउन मेनू
मैं "समाचार" तत्व से ड्रॉपडाउन मेनू बनाने की कोशिश कर रहा हूं, लेकिन मुझे कोड चलाने के दौरान कभी भी कोई दृश्य परिणाम नहीं मिलता है। मैंने यह देखने के लिए .dropdown-content के display मान block को बदलने की कोशिश की है कि यह सूची दृश्यमान करेगी, लेकिन कुछ भी नहीं दिखाया गया। मैं क्या खो रहा हूँ?
body{
\t background-image: url("images/seamless-panda-bear-pattern.jpg");
\t font-size: 100%;
\t width: 80%;
\t margin: auto;
\t font-family: Palatino,"Palatino", Arial;
}
#top{
\t background-color: black;
\t color: white;
\t padding-left: 10px;
\t border: 2px solid white;
\t font-family: Copperplate,"Copperplate Gothic Light",fantasy;
\t opacity: 0.85;
\t padding-left: 25px;
}
#menu{
\t list-style-type: none;
\t margin: 0;
\t padding: 0;
\t overflow: hidden;
\t background-color: #333;
\t position: fixed;
\t width: 80%;
}
li{
\t float: left;
}
#login{
\t float: right;
\t padding-right: 20px;
}
li a{
\t display: block;
\t color: white;
\t text-decoration: none;
\t text-align: center;
\t padding: 14px 16px;
}
li a:hover{
\t background-color: white;
\t color: black;
}
li.dropdown{
\t display: inline-block;
}
.dropdown-content{
\t display: none;
\t position: absolute;
\t background-color: #f9f9f9;
\t min-width: 160px;
\t box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,2);
\t padding: 12px 16px;
\t z-index: 1;
}
.dropdown-content a{
\t display: block;
\t text-decoration: none;
\t padding: 12px 16px;
\t color: black;
}
.dropdown:hover .dropdown-content{
\t display: block;
}
#bio{
}
#bottom{
}<div id="nav">
<ul style="list-style-type: none" id="menu">
\t <li><a href="home.html">Home</a></li>
\t <li class="dropdown"><a class="dropbtn" href="#">News</a>
\t \t <div class="dropdown-content">
\t \t \t <a href="#">Games</a>
\t \t \t <a href="#">Web Design</a>
\t \t \t <a href="#">Travel</a>
\t \t </div>
\t </li>
\t <!-- create a link to a part of the same page for contact info -->
\t <li><a href="#bottom">Contact info</a></li>
\t <li id="login"><a href="login.html">Log In</a></li>
</ul>
</div>
आप क्या करना चाहते हैं? – mmativ
जब मैं कोड स्निपेट चलाता हूं तो यह वैसे ही काम करता है जैसा आप चाहते हैं, क्या मुझे कुछ याद आ रहा है? अनुलेख आपकी पोस्ट बढ़िया है! –
आपने वास्तव में ऐसा किया जो अधिकांश लोगों ने नहीं किया और पर्याप्त कोड प्रदान किया। वाह!!! यह मेरे ब्राउज़र पर भी काम करता है, क्रोम भी रास्ते में। – Velocibadgery