How To Create A Hover Dropdown Menu Using HTML CSS

How To Create A Hover Dropdown Menu Using HTML CSS
293 Views

Coding is fun. Right? People who are involved in web designing love to create amazing design for web pages. Hover effect is one of them. How does it feel when you see an attractive menu bar? Yah, an attractive menu bar attracts users easily.

Hi guys welcome back to anupdebnath.info. Today, in this article I am going to show you a simple hover dropdown menu tricks. Let’s get it started.

Our discussion topic is –

How To Create A Hover Dropdown Menu Using HTML CSS

Apply HTML Code

First Step :: At the beginning, we need to create the HTML structure on our code editor. Write the code now –

<!DOCTYPE html>
<html>
<head>
  <title>How To Create A Hover Dropdown Menu</title>
</head>
<body>

Second Step :: between body tag, we need  to write our html code doe hover dropdown menu. For this we need to create a div at first.

<div class="menu">
    <button class="menu-button">
      Hover Dropdown Menu
    </button>
    <div class="menu-item">
      <a href="">Menu 01</a>
      <a href="">Menu 02</a>
      <a href="">Menu 03</a>
      <a href="">Menu 04</a>
    </div>
  </div>

Yah, we have done completing our html structure for hover dropdown menu. Time to go for css code.

Apply CSS Code

First step :: Did you just notice we have three html classes? In our stylesheet, we need to write code for these html classes. The first html class is ‘menu’. Write some css codes for this.

.menu{
	position: relative;
	display: inline-block;
	left: 40%;
}

I took 40% space from the left side to bring it in the middle. You can keep it as it is.  ( Your choice ).

Second Step :: Inside the first div, we have a button. And inside of this we also have a html class which we have defined as “menu-button”. It needs some css codes now-

.menu-button{
	background-color: #000;
	color: #fff;
	padding:15px;
	font-size: 18px;
	border:none;
}

Third Step :: Look at the first div. It has a button and an another div inside of it. The second div has a html class and also has anchor tags. In this step we need to code for these.

/* Code for second html class */
.menu-item{
	display: none;
	background-color: #f1f1f1;
	min-width: 160px;
	position: absolute;
	box-shadow: 0px 8px 16px 0 rgba(0,0,0,0.2);
}

/* Code for anchor tag */
.menu-item>a{
	color: #000;
	padding: 14px 16px;
	display: block;
	text-decoration: none;
	transition: 0.4s;
}

Fourth Step :: we have mentioned that we will create hover dropdown menu. So for this, we have to write some css codes for hover.

/* code for hover menu-item */
.menu-item>a:hover{
	background-color: #ddd;
	transition: 01s;
	text-align: center;
}

/* Code for hover menu */
.menu:hover .menu-item{
	display: block;
}
/* code to change the background color on hover */
.menu:hover  .menu-button{
	background-color: #3e8e41;
}

Yah we have finished our designed. Now open your html document and see the design. Hope you get what you want.

Hy guys, for your better understanding, i have made a video. Watch this –

How is this? Coding is fun, isn’t it? :p :p If you like this comment below. If you think it is not so cool as your thought then describe your opinion regarding it on comment box. Happy watching. <3.

Related posts for you

2 Thoughts to “How To Create A Hover Dropdown Menu Using HTML CSS”

  1. Oh really…coding is funny game…Superb article..Go ahead bro..💙

Share Your Opinion With Me