How to make a dropdown menu in html Class-2
आइए देखें कि क्या हम CSS के साथ मेनू बना सकते हैं।
<nav role=”navigation”>
<ul>
<li><a href=”#”>One</a></li>
<li><a href=”#”>Two</a></li>
<li><a href=”#”>Three</a></li>
</ul>
</nav>
अब, मान लें कि हम दूसरे नेविगेशन आइटम पर एक उप-मेनू ड्रॉपडाउन चाहते हैं। हम वहां वही काम कर सकते हैं और उस सूची आइटम के भीतर लिंक की एक सूची शामिल कर सकते हैं:
<nav role=”navigation”>
<ul>
<li><a href=”#”>One</a></li>
<li><a href=”#”>Two</a>
<ul class=”dropdown”>
<li><a href=”#”>Sub-1</a></li>
<li><a href=”#”>Sub-2</a></li>
<li><a href=”#”>Sub-3</a></li>
</ul>
</li>
<li><a href=”#”>Three</a></li>
</ul>
</nav>
अब हमारे पास दो-स्तरीय नेविगेशन प्रणाली है। सामग्री को छिपाने और प्रदर्शित करने के लिए जब हम इसे दिखाना चाहते हैं, तो हमें कुछ सीएसएस लागू करने की आवश्यकता होगी। बातचीत पर स्पष्टता के लिए सभी शैली गुणों को निम्न उदाहरण से हटा दिया गया है:
li {
display: block;
transition-duration: 0.5s;
}
li:hover {
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
