Create Dropdown Hover Effects Using CSS

Published March 28, 2016 by CSS Newbies.

Many developers choose to use JavaScript or jQuery to create simple dropdown hover effects, but the same effect can be achieved in a much more lightweight way by using CSS.


If you want an HTML element to appear when another element is hovered upon, your HTML might look something like this:

<div class="dropdown">
		<p class="drop">Hover Me</p>
		<div class="hover">
			<p>Dropdown Item</p>

The .hover div is what you’re going to want to appear when the .dropdown div is hovered upon, so it shouldn’t be visible when the page first loads. That can be achieved with the following CSS:


display: none;


To make the .hover div appear when .dropdown is hovered upon, you will also need this line of CSS:

.dropdown:hover .hover{

display: block;


That’s all you need to create a simple dropdown hover effect. It can be used to create navigation menus, photo captions that appear upon hover, to enlarge thumbnails upon hover, and more. Experiment with transitions and styling to really make the code your own!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>