I created a dropdown menu. But there I face a problem when I clicked outside keeping the dropdown menu open, the dropdown menu don't close. I try to add many javascript codes but in the end, I can't do it. Please someone please help me to fix this issue. I have given below my project code. I need this features outside click dropdown menu close only through this JS code.
function toggleDropDown(id) {
document.querySelectorAll('.dropdown-content').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
}
body{
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
display:flex;
align-items:center;
justify-content: space-between;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown{
display:inline;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 260px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show{display:block;}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn" onclick="toggleDropDown('div1')">Dropdown1
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id=div1>
<p>Div1 dropdown</p>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="toggleDropDown('div2')">Dropdown2
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id=div2>
<p>Div2 dropdown</p>
</div>
</div>
</div>
One way to do this is to add an eventListener on the document. Then you check what has been clicked and if it involves your dropdown, do nothing, and if it doesn't involve your dropdown, then close the dropdowns.
This example uses closest() which will go up the parents of the clicked element to try and find one that has the class dropdown. If it finds one (not null), then we know we don't want to close the dropdown since the user is interacting with it. All other cases will close the dropdown.
document.addEventListener('click', (e) => {
// cases where we want to close the dropdown
if (e.target.closest(".dropdown") === null) {
document.querySelectorAll('.dropdown-content').forEach(el => el.classList.remove("show"));
}
});
function toggleDropDown(id) {
document.querySelectorAll('.dropdown-content').forEach(el => el.id === id ? el.classList.toggle('show') : el.classList.remove("show"));
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 260px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn" onclick="toggleDropDown('div1')">Dropdown1
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="div1">
<p>Div1 dropdown</p>
</div>
<div class="dropdown">
<button class="dropbtn" onclick="toggleDropDown('div2')">Dropdown2
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="div2">
<p>Div2 dropdown</p>
</div>
</div>
</div>
</div>
Perhaps this solution, which is not the best and reliable, but works without JS, will be able to help you:
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 260px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
/*
added to CSS
*/
.dropbtn + .dropdown-content:hover, .dropbtn:focus + .dropdown-content {
display: block;
pointer-events: all !important;
}
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Dropdown1
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<p>Div1 dropdown</p>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown2
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<p>Div2 dropdown</p>
</div>
</div>
</div>
Related
I am trying to create a dropdown menu from "about us" but there seems to be some color unabling to give a proper dropdown. On the navigation bar there's a block of red color next to the "Home" button. Also when i hover on the "About us" button there are again red color visible therefore not aligning the dropdown menu links. Can someone explains how to remove the additional color? Here's my code:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<br>
<style>
* {box-sizing: border-box;}
body {
margin: 0;
font-family: TIMES ROMAN;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
.topnav a {
float: left;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #330000;
color: white;
}
.topnav .search-container {
float: right;
}
.topnav input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.topnav .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.topnav .search-container button:hover {
background: #ccc;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
}
.dropdown-content {
display: none;
position: absolute;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.topnav .search-container {
float: none;
}
.topnav a, .topnav input[type=text], .topnav .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.topnav input[type=text] {
border: 1px solid #ccc;
}
}
</style>
<body style="background-color:#C0C0C0">
<div class="topnav">
<img src="D1.jpg" height="70" width="120" align="left"><br>
Home
<div class="dropdown">
<button class="dropbtn"><a class="active">About us
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
</div>
<div class="row">
<div class="column">
Who are we?
What do we do
Project aims/goals
History
</div>
</div>
</div>
</div>
Contact ✆
Gallery 📸
Our services
Policy
Sign Up
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</body>
</html>
The way you code your css is different then how you have the html structure.
<a class="active"><button class="dropbtn">About us <i class="fa fa-caret-down"></i></button></a>
Check the above line and replace it in your code.
Wrap your button element inside a (anchor) tag.
So I am creating a dropdown list with text and a delete button, but I have a small issue. When pressing the ahref link, it redirects perfectly to the website, but when pressing the delete button, it displays the popup message as it should, but then redirect to the ahref link. I don't want it to redirect when pressing the delete button. How can I avoid this?
function myFunction() {
alert("You clicked the button");
return;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
/*overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 54px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.home {
background-color: green;
}
.dropdown {
float: left;
/* overflow: hidden; */
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.deleteBtn {
float: right;
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- Dropdown value below, value is for testing purpose -->
<a href="https://google.com/">Google
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
<a href="https://youtube.com/">Youtube
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
<a href="https://amazon.com/">Amazon
<button type='deleteBtn' onclick="myFunction()">X</button>
</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>
#navbar should not be inside #main-container!
Don't place <button> inside <a> and vice-versa.
Use a common parent for both your <a> and <button> instead. (I.e: use an <ul> and <li> list)
type='deleteBtn' is an invalid attribute. Use class instead class='deleteBtn'
Don't use inline on* handlers. JS should be in one place only, and that's your script
Edited CSS and HTML:
function removeListItem(ev) {
const EL_list = ev.currentTarget.closest("li")
EL_list.remove();
}
const ELS_deleteBtn = document.querySelectorAll(".deleteBtn");
ELS_deleteBtn.forEach(EL => EL.addEventListener("click", removeListItem));
/*QuickReset*/ * {margin:0; box-sizing:border-box; }
html {height: 100%;}
body {height: 100%; font-family: "Poppins", sans-serif;}
#navbar {
background-color: #333;
position: sticky;
display: flex;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
#navbar>a {
display: block;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
#navbar .home {
background-color: green;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}
.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;
}
.dropdown-list {
padding: 0;
margin: 0;
}
.dropdown-list li {
display: flex;
}
.dropdown-list li a {
padding: 14px 16px;
flex: 1;
}
.dropdown-list li:hover a {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
#main-container {
padding: 0 20px;
}
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<ul class="dropdown-list">
<li>
Google
<button class='deleteBtn'>X</button>
</li>
<li>
Youtube
<button class='deleteBtn'>X</button>
</li>
<li>
Amazon
<button class='deleteBtn'>X</button>
</li>
</ul>
</div>
</div>
</div>
<div id="main-container">
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
use preventDefault().
Read More about preventDefault
function myFunction(e) {
e.preventDefault();
alert("You clicked the button");
return;
}
html {
height: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Poppins", sans-serif;
background-color: #00ff00;
}
#main-container {
padding: 16px;
margin-top: 30px;
}
#navbar {
/*overflow: hidden;*/
background-color: #333;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 54px;
z-index: 9999;
}
#navbar a.active {
text-decoration: underline;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.home {
background-color: green;
}
.dropdown {
float: left;
/* overflow: hidden; */
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.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;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
.deleteBtn {
float: right;
}
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css'>
</head>
<body>
<div id="main-container">
<div id="navbar" class="navbar">
Home
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<!-- Dropdown value below, value is for testing purpose -->
<a href="https://google.com/">Google
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
<a href="https://youtube.com/">Youtube
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
<a href="https://amazon.com/">Amazon
<button type='deleteBtn' onclick="myFunction(event)">X</button>
</a>
</div>
</div>
</div>
<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</div>
</body>
</html>
I have most of the HTML and CSS written for the dropdown menu, however I can't get the dropdown menu to be stacked vertically, it is displayed horizontally. How can I make it so it is stacked vertically? This is a picture of what the horizontal menu looks like, the second element I want is off the screen because it is next to the first one.
Here is the HTML code:
<!-- Buttons to navigate site -->
<div class = "navbar">
<button id = "home">Home</button>
<button id = "aboutus">About Us</button>
<!-- Wellness Dropdown Menu -->
<div class = "dropdown">
<button id = "wellness">Wellness</button>
<div class = "dropdown-content">
Recipes
Blog
</div>
</div>
</div>
Here is the CSS code:
/*-----------
Dropdown Menu
-------------*/
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 180px;
z-index: 1;
}
.dropdown-content a {
padding: 5px 20px;
cursor: pointer;
border: none;
font-size: 16px;
font-family: 'Josefin Sans', sans-serif;
text-decoration: none;
text-align: center;
}
.dropdown-content a:hover {
color: #efdcaf;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover #wellness {
color: #efdcaf;
}
That is because a tags are displayed inline.
Use display block to fix your problem.
.dropdown-content a {
display: block;
padding: 5px 20px;
cursor: pointer;
border: none;
font-size: 16px;
font-family: 'Josefin Sans', sans-serif;
text-decoration: none;
text-align: center;
}
You can use display:block; and move the text towards left;
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 180px;
z-index: 1;
}
.dropdown-content a {
display: block;
padding: 5px 5px;
cursor: pointer;
border: none;
font-size: 16px;
font-family: 'Josefin Sans', sans-serif;
text-decoration: none;
text-align: center;
text-align: left;
}
.dropdown-content a:hover {
color: #efdcaf;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover #wellness {
color: #efdcaf;
}
<div class="navbar">
<button id="home">Home</button>
<button id="aboutus">About Us</button>
<!-- Wellness Dropdown Menu -->
<div class="dropdown">
<button id="wellness">Wellness</button>
<div class="dropdown-content">
Recipes
Blog
</div>
</div>
</div>
Update .dropdown:hover .dropdown-content as below.
.dropdown:hover .dropdown-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
button {
padding: 5px 20px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: transparent;
min-width: 180px;
z-index: 1;
}
.dropdown-content a {
padding: 5px 20px;
cursor: pointer;
border: none;
font-size: 16px;
font-family: 'Josefin Sans', sans-serif;
text-decoration: none;
text-align: center;
}
.dropdown-content a:hover {
color: #efdcaf;
}
.dropdown:hover .dropdown-content {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.dropdown:hover #wellness {
color: #efdcaf;
}
<div class="navbar">
<button id="home">Home</button>
<button id="aboutus">About Us</button>
<!-- Wellness Dropdown Menu -->
<div class="dropdown">
<button id="wellness">Wellness</button>
<div class="dropdown-content">
Recipes
Blog
</div>
</div>
</div>
I am new to Angular 6 and Bootstrap ,Here I have a Navigation bar with 3 nav items .
In this I have a nav item named as Store ,When User mouse hover on the Store I need to show a mega menu .mega menu should have the with of the nav bar .
I have tried something but I could not get what I expected .
Stackblitz : https://stackblitz.com/edit/angular-q4p7cc?file=src%2Fstyles.css
can anyone help me to solve this .
try solution
HTML:
<div class="navbar">
<div *ngFor="let cat of category" class="dropdown">
<button class="dropbtn">Link {{cat.catnumber}}
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="row">
<div *ngFor="let catg of cat.nest" class="column">
<h3>Category {{cat.catnumber}} {{catg.link}} </h3>
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
style.css:
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
.dropdown-content {
display: none;
position: fixed;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
background: yello;
display: block;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
progress and issue (its the offices dropdown): jsfiddleLink
Code:
$(function() {
$('#dropbutton').hover(function(e) {
$('#myDropdown').toggle();
});
});
How do I either capture the hover outside or just keep the display for the div in child dropdown elements. Thanks!
No need fo js, just add this css code:
.dropdown:hover .dropdown-content{
display: block;
}
This will display the dropdown-content when you hover on the parent (dropdown)
See snippet:
.dropbtn {
background-color: gray;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
width: 19.5%;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: black;
outline: 0;
/*invalid
text-style: bold;*/
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
overflow: auto;
left: 0;
right: 4px;
z-index: 1;
margin-top: 2px;
font-size: 16px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
background-color: gray;
color: white;
margin-bottom: 2px;
text-align: center;
}
.dropdown a:hover {
background-color: black;
}
.show {
display: block;
}
.dropdown:hover .dropdown-content{
display: block;
}
<div class="navItem" style="display:inline">
<button class="dropbtn"> Home </button>
</div>
<div class="navItem dropdown" style="display:inline">
<button onclick="myFunction()" class="dropbtn" id="dropbutton">Offices</button>
<div id="myDropdown" class="dropdown-content">
Regional
Global
Local
</div>
</div>
<div class="navItem" style="display:inline">
<button class="dropbtn"> Who we are</button>
</div>
<div class="navItem" style="display:inline">
<button class="dropbtn"> Contact </button>
</div>
<div class="navItem" style="display:inline">
<button class="dropbtn" id="searchBox"> Search </button>
</div>
<p>
Page content goes here. As you click on dropdown or anything, this text remains here. You can try clicking on the Office dropdown on the menu above.
</p>
You can replace the jQuery completely with CSS.
First you need to add:
#dropbutton:hover + .dropdown-content,
.dropdown-content:hover {
display: block;
}
This will open / close the menu.
I've also replaced the margins on the menu with border-bottom:
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
background-color: gray;
color: white;
text-align: center;
border-bottom: 2px solid #fff;
}
.dropdown-content a:nth-child(1) {
border-top: 2px solid #fff;
}
Here's a complete example:
.dropbtn {
background-color: gray;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
width: 19.5%;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: black;
outline: 0;
/*invalid
text-style: bold;*/
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
overflow: auto;
left: 0;
right: 4px;
z-index: 1;
font-size: 16px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
background-color: gray;
color: white;
text-align: center;
border-bottom: 2px solid #fff;
}
.dropdown-content a:nth-child(1) {
border-top: 2px solid #fff;
}
.dropdown a:hover {
background-color: black;
}
.show {
display: block;
}
#dropbutton:hover + .dropdown-content,
.dropdown-content:hover {
display: block;
}
<div class="navItem" style="display:inline">
<button class="dropbtn"> Home </button>
</div>
<div class="navItem dropdown" style="display:inline">
<button onclick="myFunction()" class="dropbtn" id="dropbutton">Offices</button>
<div id="myDropdown" class="dropdown-content">
Regional
Global
Local
</div>
</div>
<div class="navItem" style="display:inline">
<button class="dropbtn"> Who we are</button>
</div>
<div class="navItem" style="display:inline">
<button class="dropbtn"> Contact </button>
</div>
<div class="navItem" style="display:inline">
<button class="dropbtn" id="searchBox"> Search </button>
</div>
<p>
Page content goes here. As you click on dropdown or anything, this text remains here. You can try clicking on the Office dropdown on the menu above.
</p>