Issue
I built a horizontal nav bar with a dropdown menu that is supposed to display on hover over the button/link it sits under and stay displayed when the mouse is moved down onto the dropdown menu itself. The dropdown menu always displays on hover of the button/link on the main nav bar, but I'm having issues with the display of the dropdown menu when moving the mouse down from the main horizontal nav bar onto the dropdown menu itself. I've tried it in Chrome and Edge - it typically works for the the first mouse over, but then the dropdown menu starts to disappear as soon as the mouse moves below the button/link it sits under.
I'm using Visual Studio Code on a Windows 11 machine to write everything.
Here's the HTML code:
<!DOCTYPE html>
<html lang="en">
<!-- CaseStudy_Homepage -->
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="CaseStudy.css"/>
<title>OPE ID Lookup and FICE Crosswalk: Homepage</title>
</head>
<body>
<div class="topnav" id="myTopnav">
<a id="active">Home</a>
<div class="dropdown">
<button class="dropbtn"><a href="SearchMenu.html">Search Options</a></button>
<div class="dropdown-content">
<a href="Fice.html">OPE ID code by FICE code</a>
<a href="Search.html">OPE ID code by Institutional Information</a>
<a href="VerifySearch.html">Verify OPE ID code</a>
</div>
</div>
<a href="DataDictionary.html">Data Dictionary</a>
</div>
Here's the CSS for the nav bar:
/* Navigation Bar */
/* Add a black background color to the top navigation */
.topnav {
height: 48.8px;
background-color: black;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
font-weight: bold;
line-height: normal;
margin: 0;
}
/* Add an active class to highlight the current page */
#active, #active a:hover {
background-color: inherit;
text-decoration: underline;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 18px;
font-weight: bold;
border: none;
outline: none;
color: white;
text-align: center;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
Does anyone see or know why it's behaving like this?
Solution
To solve this problem, all you have to do is move the dropdown content a little up.
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
transform: translateY(-5px); /* this part is the solution */
}
The reason the dropdown was not working properly is that there was a small gap between the .dropdown element and .dropdown-content element.
So, as soon as you move your mouse to the content, neither of those elements were being hovered, and the dropdown closed.
Edit : Attaching the entire solution for reference
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Navigation Bar */
/* Add a black background color to the top navigation */
.topnav {
height: 48.8px;
background-color: black;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
font-weight: bold;
line-height: normal;
margin: 0;
}
/* Add an active class to highlight the current page */
#active,
#active a:hover {
background-color: inherit;
text-decoration: underline;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 18px;
font-weight: bold;
border: none;
outline: none;
color: white;
text-align: center;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
transform: translateY(-5px);
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<a id="active">Home</a>
<div class="dropdown">
<button class="dropbtn"><a href="SearchMenu.html">Search Options</a></button>
<div class="dropdown-content">
<a href="Fice.html">OPE ID code by FICE code</a>
<a href="Search.html">OPE ID code by Institutional Information</a>
<a href="VerifySearch.html">Verify OPE ID code</a>
</div>
</div>
<a href="DataDictionary.html">Data Dictionary</a>
</div>
</body>
</html>Answered By - Ashish Shevale
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.