Below are two sets of code for creating a dropdown menu. Although similar, the codes have a slight difference. In both cases, I have assigned classes to the main list item and submenu. The main heading has been given the 'heading' class with an anchor element in each of its elements. When I apply ":hover" on the anchor element combined with the submenu (dropdown element), the code does not function properly. However, if I apply ":hover" on the class 'heading' instead, the drop-down works. I will now share the code to provide more clarity. The following code successfully creates the drop-down menu by applying hover on the 'heading' class. I have included comments in the CSS code to indicate which part of the code is being referenced.
.menu{
padding: 20px;
background: #d80000;
}
.mainmenu{
display: flex;
list-style: none;
}
.heading{
margin-right: 1px;
}
.mainmenu .heading a{
display: inline-block;
padding: 10px;
text-decoration: none;
background: #fff;
color: #d80000;
width: 80px;
text-align: center;
position: relative;
}
.submenu{
list-style: none;
margin-left: -40px;
display: none;
position: absolute;
}
.submenu a{
border-top: 3px solid #d80000;
width: 80px;
}
.heading a:hover{
background: #d80000;
color: #fff;
}
/* Here the hover and submenu element works to make the element display as block*/
.heading:hover .submenu{
display: block;
}<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<div class="menu">
<ul class="mainmenu">
<li class="heading"><a href="#">Home</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">About</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">Services</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">Products</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">Contact</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>I will now present the code that is not functioning correctly for the dropdown menu. In this case, the anchor element is applied with the hover effect along with the submenu class.
.menu{
padding: 20px;
background: #d80000;
}
.mainmenu{
display: flex;
list-style: none;
}
.heading{
margin-right: 1px;
}
.mainmenu .heading a{
display: inline-block;
padding: 10px;
text-decoration: none;
background: #fff;
color: #d80000;
width: 80px;
text-align: center;
position: relative;
}
.submenu{
list-style: none;
margin-left: -40px;
display: none;
position: absolute;
}
.submenu a{
border-top: 3px solid #d80000;
width: 80px;
}
.heading a:hover{
background: #d80000;
color: #fff;
}
/* Here, the hover on the anchor element and submenu class does not work to display the element as block */
.heading a:hover .submenu{
display: block;
}<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="style5.css">
</head>
<body>
<div class="menu">
<ul class="mainmenu">
<li class="heading"><a href="#">Home</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">About</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">Services</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">Products</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
<li class="heading"><a href="#">Contact</a>
<ul class="submenu">
<li class="items"><a href="#">A</a></li>
<li class="items"><a href="#">B</a></li>
<li class="items"><a href="#">C</a></li>
<li class="items"><a href="#">D</a></li>
<li class="items"><a href="#">E</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>The question arises as to why the first code sample works for creating the dropdown menu while the second code does not. The second code applies hover on the anchor element, whereas the first code utilizes hover on the 'heading' class of the main menu.