<!-- dropdown container -->
<div class="dropdown">
<!-- trigger button -->
<button>Navigate</button>
<!-- dropdown menu -->
<ul class="dropdown-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
.dropdown {
position: relative;
/** Make it fit tightly around it's children */
display: inline-block;
}
.dropdown .dropdown-menu {
position: absolute;
/**
* Set the top of the dropdown menu to be positioned 100%
* from the top of the container, and aligned to the left.
*/
top: 100%;
left: 0;
/** Allow no empty space between this and .dropdown */
margin: 0;
}
/**
* Apply these styles to .dropdown-menu when user hovers
* over .dropdown
*/
.dropdown:hover .dropdown-menu {
/** Show dropdown menu */
display: block;
}
Not only out updated but so simple to apply for a web template if you want to build a website with a professional menu. I suggest you try to g00gle mega menu or pure drop down menu CSS, tons of types of these codes on the search results, click and find a suitable one for you.I tried to implement this one here But it seems to be outdated and not quite mobile friendly. Any other options?
I need pure css. No Javascript.
$100 to your Paypal
300 Trophy Points
1 banner ad 728x 90
Referral link for :