dropdown on hover
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; // remove the gap so it doesn't close
}dropdown on hover
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; // remove the gap so it doesn't close
}css dropdown
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>dropdown in html and css
<div id="container">
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">WordPress</a>
<!--Fridt Tier Drop Down-->
<ul>
<li><a href="">Theme</a></li>
<li><a href="">Plugins</a></li>
<li><a href="">Tutorials</a></li>
</ul>
<li><a href="">Web Design</a>
<!--First Tier Drop Down-->
<ul>
<li><a href="">Resource</a></li>
<li><a href="">Links</a></li>
<li><a href="">Tutorials</a>
<!--Second Tier Drop Down-->
<ul>
<li><a href="">HTML/CSS</a></li>
<li><a href="">JQuery</a></li>
<li><a href="">Outher</a>
<!-- Third Tier Drop Down-->
<ul>
<li><a href="">Stuff</a></li>
<li><a href="">Things</a></li>
<li><a href="">Outher Stuff</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="">Graphic Design</a></li>
<li><a href="">Inspiration</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
</nav>
</div><!--End HTML Code-->Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us
