Looking to create a main menu with dropdown items that appear when the user hovers over them? You may have noticed that typically, the dropdown disappears once the hover event is lost. But what if you want the menu to stay visible and only disappear upon clicking?
An example of this functionality can be seen on this website:
If you're wondering how to achieve this effect using CSS and JS, take a look at the code snippet below:
<ul class="navigation clearfix">
<li class="active">
<a href="#">HOME</a>
</li>
<li>
<a href="#">pages</a>
<ul class="drop-down">
<li>
<a href="event.html">Event</a>
</li>
<li>
<a href="blog.html">Blog</a>
</li>
<li>
<a href="blog-detail-page.html">Blog-Detail</a>
</li>
<li>
<a href="travel-info.html">Travel-Info</a>
</li>
<li>
<a href="404-page.html">404</a>
</li>
</ul>
</li>
</ul>
To style your navigation menu accordingly, here's an example of some CSS:
.clearfix {
display: block;
}
ul {
list-style-type: none;
}
ul, ol {
font-size: 100%;
line-height: 1.5;
list-style: none;
}
.navigation > li {
padding: 16px 0px 36px 26px;
float: left;
position: relative;
line-height: 1.5em;
}
.navigation > li:hover .drop-down {
top: 76px;
left: auto;
left: 16px;
right: 0;
}
.drop-down {
position: absolute;
top: 100px;
width: 160px;
z-index: 999;
left: -9999px;
opacity: 0;
transition: top .2s ease, opacity .2s ease;
}