'hover' dropdown to a clickable dropdown (via media queries)

Question

The dropdown in this website normally (large window) 'opens' when the cursor hovers over it. I want the dropdown to change this and open via clicking, but only after the window size is small enough (when top navbar becomes sliding sidebar). Thank you to anyone who helps me.

Edit: The problem is almost fixed, only need the dropdown to close when the button is clicked again.

Here is all of my code (HTML, CSS and JavaScript):

 function openNav(){ $('body').addClass('open'); } function closeNav(){ $('body').removeClass('open'); } //Newly Added (this opens the dropdown when it is clicked) function openDrop() { $('body').addClass('show'); } //Newly Added (this closes the dropdown when something is clicked (specified in html file via onclick = "closeDrop()" function closeDrop() { $('body').removeClass('show'); } 

 html { min-height: 100%; height: auto; background: linear-gradient(#e6e6e6, white); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } body { -webkit-font-smoothing: antialiased; margin: 0%; font-family: Arial; scroll-behavior: smooth; height: auto } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb:hover { background: #80bfff; } ::-webkit-scrollbar-track { background: #f2f2f2; } ::-webkit-scrollbar-thumb { border-radius: 25px; border-style: solid; border-color: #f2f2f2; border-width: 2px; background: #3399ff; } * { box-sizing: border-box; } .header { position: relative; left: 0px; right: 0px; top: 0px; font-size: 187%; text-align: left; padding: 1.5%; background-color: white; color: grey; z-index: 2; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); } #main1 { color: #3399ff; } .content { overflow: hidden; } .row { display: flex; flex-wrap: wrap; padding: 0px 10px; } .card { flex: 25%; max-width: 25%; padding: 0px 4px; } .card p { float: left; background-color: white; box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2); border-radius: 5px; padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; transition: 0.3s; margin-top: 8px; vertical-align: middle; } .card p:hover { box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2); } .card a { float: left; color: grey; text-align: center; text-decoration: none; display: block; border-radius: 5px; padding: 2%; transition: 0.3s; } .card a:hover { box-shadow: 0px 3px 10px rgba(0,0,0,0.1); background-color: #fbfbfb; color: #3399ff; } .card-home { position: relative; margin-right: 10%; margin-left: 10%; margin-top: 5%; margin-bottom: 10%; } .card-home p { float: left; background-color: white; box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2); border-radius: 5px; padding: 30px; font-size: 120%; transition: 0.3s; margin-top: 8px; vertical-align: middle; } .card-home p:hover { box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2); } .card-home a { float: left; color: grey; text-align: center; text-decoration: none; display: block; border-radius: 5px; padding: 1%; transition: 0.3s; } .card-home a:hover { box-shadow: 0px 3px 10px rgba(0,0,0,0.1); background-color: #fbfbfb; color: #3399ff; } .navigation { z-index: 1; width: 100%; list-style-type: none; background-color: white; box-shadow: 0px 3px 25px rgba(0,0,0,0.2); position: -webkit-sticky; position: sticky; top: 0px; padding-top: 0px; height: auto; } #sidebar { width: 100%; } li { float: left; } li a, .dropbtn { background-color: white; display: block; text-align: center; width: 100%; height: auto; padding: 15px; font-size: 100%; color: grey; text-decoration: none; cursor: pointer; transition: 0.5s; } li a:hover:not(.active), .dropdown:hover .dropbtn { background-color: #f2f2f2; } @media (screen and max-width: 1500px) { .card { flex: 50%; max-width: 50%; } } @media (max-width: 800px) { li { float: none; } .card { margin-top: 4.2em; flex: 100%; max-width: 100%; } .card-home { margin-top: 5em; margin-left: 20px; margin-right: 20px; } .navigation { z-index: 2; height: 100%; width: 0; position: fixed; background-color: #e6e6e6; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } li { background: #e6e6e6; } li a, .dropbtn { background-color: #e6e6e6; float: left; text-align: left; padding: 10px; width: 100%; text-decoration: none; font-size: 25px; display: inline-block; z-index: 1; } .closebtn { width: auto; float: right; padding: 6px 16px 6px 16px; position: absolute; text-align: center; top: 5px; right: 5px; font-size: 36px; margin-left: 50px; } .about a { float: left; } .closebtn:hover { border-radius: 50%; } #main1 { transition: margin-left 0.5s; } #main2 { transition: margin-left 0.5s; } .header { position: fixed; box-shadow: 0px 3px 25px rgba(0,0,0,0.2); } .header span { padding: 5px; } #sidebar { width: 0px; } .open #sidebar{ width:250px; } .open #main1 { margin-left:250px; } .open #main2 { margin-left:250px; } /*.dropdown:hover .dropdown-content { display: block; position: relative; background-color: #e6e6e6; }*/ } @media (min-width: 800px) { .closebtn { display: none; } .header span { display: none; } .dropdown i { display: none; } .dropdown:hover .dropdown-content { display: block; } .bottom { border-radius: 0px 0px 5px 5px; } .dropdown-content { background-color: #f2f2f2; } .about { float: right; position: relative; } } /*Newly added*/ .show #myDropdown { display: block; position: relative; background-color: #e6e6e6; } li .dropdown { display: inline-block; } .dropdown-content a { text-align: left; color: grey; padding: 12px 16px; text-decoration: none; display: block; background-color: white; } .dropdown-content { display: none; position: absolute; min-width: 103px; box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.3); border-radius: 0px 0px 5px 5px; z-index: 2; } .dropdown button { border: none; } button:focus { outline: none; } .fa-caret-down { float: right; padding-right: 8px; } .active { background-color: #3399ff; color: white; } .active:hover { background-color: #80bfff; transition: 0.5s; } br.clearLeft { clear: left; } 

 <!DOCTYPE html> <html> <head> <title>Home</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel = "stylesheet" href = "style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src = "script.js"></script> </head> <body> <div id = "main1"; class = "header";> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span> Website </div> <div id = "sidebar"; class = "navigation"> <li><a class = "active" href = "Home.html">Home</a></li> <li><a href="News.html">News</a></li> <li><a href="#contact">Contact</a></li> <li class = "dropdown"> <!--Newly edited (added onclick = "openDrop()")--> <button onclick = "openDrop()" class = "dropbtn"> Dropdown <i class = "fa fa-caret-down"></i> </button> <!--Newly edited (added id = "myDropdown"--> <div id = "myDropdown" class = "dropdown-content"> <a href = "#link1">Link 1</a> <a href = "#link2">Link 2</a> <a class = "bottom"; href = "#link3">Link 3</a> </div> </li> <li class = "about";><a href="#about">About</a></li> <li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a></li> <br class="clearLeft" /> </div> <!--Newly added (onclick = "closeDrop()")--> <div onclick = "closeDrop()"> <div id = "main2"; class = "content";> <div class = "card-home";> <p> Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne. Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an. Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te. Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam. Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam. <br /> <br /> <a href = "#link";>Link</a> </p> </div> </div> </div> </body> </html> 

Answer 1

Your issue is in this line:

var dropdownContent = document.getElementsByClassName("dropdown-content")

The returned value is an HTMLCollection and so you cannot use it like in:

dropdownContent.style.display

Because you have only one dropdown-content you can get the first element:

var dropdownContent = document.getElementsByClassName("dropdown-content")[0];

 function openNav(){ $('body').addClass('open'); } function closeNav(){ $('body').removeClass('open'); } var dropdown = document.getElementsByClassName("dropbtn"); var dropdownContent = document.getElementsByClassName("dropdown-content")[0]; var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { this.classList.toggle("active-btn"); var dropdown = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } 

 /* added */ .dropdown-content { position: absolute; } html { min-height: 100%; height: auto; background: linear-gradient(#e6e6e6, white); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } body { -webkit-font-smoothing: antialiased; margin: 0%; font-family: Arial; scroll-behavior: smooth; height: auto } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb:hover { background: #80bfff; } ::-webkit-scrollbar-track { background: #f2f2f2; } ::-webkit-scrollbar-thumb { border-radius: 25px; border-style: solid; border-color: #f2f2f2; border-width: 2px; background: #3399ff; } * { box-sizing: border-box; } .header { position: relative; left: 0px; right: 0px; top: 0px; font-size: 187%; text-align: left; padding: 1.5%; background-color: white; color: grey; z-index: 2; } .content { overflow: hidden; } .row { display: flex; flex-wrap: wrap; padding: 0px 10px; } .card { flex: 25%; max-width: 25%; padding: 0px 4px; } .card p { float: left; background-color: white; box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2); border-radius: 5px; padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; transition: 0.3s; margin-top: 8px; vertical-align: middle; } .card p:hover { box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2); } .card a { float: left; color: grey; text-align: center; text-decoration: none; display: block; border-radius: 5px; padding: 2%; transition: 0.3s; } .card a:hover { box-shadow: 0px 3px 10px rgba(0,0,0,0.1); background-color: #fbfbfb; color: #3399ff; } .card-home { position: relative; margin-right: 10%; margin-left: 10%; margin-top: 5%; margin-bottom: 10%; } .card-home p { float: left; background-color: white; box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2); border-radius: 5px; padding: 30px; font-size: 120%; transition: 0.3s; margin-top: 8px; vertical-align: middle; } .card-home p:hover { box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2); } .card-home a { float: left; color: grey; text-align: center; text-decoration: none; display: block; border-radius: 5px; padding: 1%; transition: 0.3s; } .card-home a:hover { box-shadow: 0px 3px 10px rgba(0,0,0,0.1); background-color: #fbfbfb; color: #3399ff; } .navigation { z-index: 1; width: 100%; list-style-type: none; background-color: white; box-shadow: 0px 3px 25px rgba(0,0,0,0.2); position: -webkit-sticky; position: sticky; top: 0px; padding-top: 0px; height: auto; } #sidebar { width: 100%; height: 70px; /* added */ } li { float: left; } li a, .dropbtn { background-color: white; display: block; text-align: center; width: 100%; height: auto; padding: 15px; font-size: 100%; color: grey; text-decoration: none; cursor: pointer; transition: 0.5s; } li a:hover:not(.active), .dropdown:hover .dropbtn { background-color: #f2f2f2; } @media (max-width: 1500px) { .card { flex: 50%; max-width: 50%; } } @media (max-width: 800px) { li { float: none; } .card { margin-top: 4.2em; flex: 100%; max-width: 100%; } .card-home { margin-top: 5em; margin-left: 20px; margin-right: 20px; } .navigation { z-index: 2; height: 100%; width: 0; position: fixed; background-color: #e6e6e6; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } li { background: #e6e6e6; } li a, .dropbtn { background-color: #e6e6e6; float: left; text-align: left; padding: 10px; width: 100%; text-decoration: none; font-size: 25px; display: inline-block; z-index: 1; } .closebtn { width: auto; float: right; padding: 6px 16px 6px 16px; position: absolute; text-align: center; top: 5px; right: 5px; font-size: 36px; margin-left: 50px; } .about a { float: left; } .closebtn:hover { border-radius: 50%; } #main1 { transition: margin-left 0.5s; } #main2 { transition: margin-left 0.5s; } .header { position: fixed; box-shadow: 0px 3px 25px rgba(0,0,0,0.2); } .header span { color: #3399ff; padding: 5px; } #sidebar { width: 0px; } .open #sidebar{ width:250px; } .open #main1 { margin-left:250px; } .open #main2 { margin-left:250px; } .dropdown-content { background: #e6e6e6; display: none; } .active-btn { background: white; } } @media (min-width: 800px) { .closebtn { display: none; } .header span { display: none; } .dropdown i { display: none; } .dropdown:hover .dropdown-content { display: block; } } li .dropdown { display: inline-block; } .dropdown-content a { text-align: left; color: grey; padding: 12px 16px; text-decoration: none; display: block; background-color: white; } /* added */ #sidebar { height: auto; } .dropdown-content { display: none; position: inherit; /* removed */ background-color: #f2f2f2; min-width: 160px; box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.3); border-radius: 0px 5px 5px 5px; z-index: 2; } .dropdown button { border: none; } button:focus { outline: none; } .fa-caret-down { float: right; padding-right: 8px; } .active { background-color: #3399ff; color: white; } .about a { float: right; position: relative; } .active:hover { background-color: #80bfff; transition: 0.5s; } br.clearLeft { clear: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div id = "main1"; class = "header";> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span> Website </div> <div id = "sidebar"; class = "navigation";> <li class = "dropdown"> <button class = "dropbtn"> Dropdown <i class = "fa fa-caret-down"></i> </button> <div class = "dropdown-content"> <a href = "#link1">Link 1</a> <a href = "#link2">Link 2</a> <a href = "#link3">Link 3</a> </div> </li> <li><a class = "active" href = "Home.html">Home</a></li> <li><a href="News.html">News</a></li> <li><a href="#contact">Contact</a></li> <li class = "about";><a href="#about">About</a></li> <li><a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a></li> <br class="clearLeft" /> </div> <div id = "main2"; class = "content";> <div class = "card-home";> <p> Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne. Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an. Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te. Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam. Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam. <br /> <br /> <a href = "#link";>Link</a> </p> </div> </div> 

Answer 2

Thanks for helping. I figured out how to do it now (with your help). It may not be perfect, but it is good enough for now.

The way I did it is by using:

function openDrop() {
    $('body').addClass('show');
}

and:

$('html').click(function(e) {   
    if( !$(e.target).hasClass('dropbtn') ) {
    $('body').removeClass('show');
}
});

The top function makes the dropdown appear when the button is clicked.

The other code removes the dropdown menu when I/you click anywhere else on the window (including the arrow in the button).

Here is the complete program (you can run the snippet to see if it works):

 function openNav(){ $('body').addClass('open'); } function closeNav(){ $('body').removeClass('open'); } //Important! function openDrop() { $('body').addClass('show'); } //Important! $('html').click(function(e) { if( !$(e.target).hasClass('dropbtn') ) { $('body').removeClass('show'); } }); 

 html { min-height: 100%; height: auto; background: linear-gradient(#e6e6e6, white); background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } body { -webkit-font-smoothing: antialiased; margin: 0%; font-family: Arial; scroll-behavior: smooth; height: auto } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb:hover { background: #80bfff; } ::-webkit-scrollbar-track { background: #f2f2f2; } ::-webkit-scrollbar-thumb { border-radius: 25px; border-style: solid; border-color: #f2f2f2; border-width: 2px; background: #3399ff; } * { box-sizing: border-box; } .header { position: relative; left: 0px; right: 0px; top: 0px; font-size: 187%; text-align: left; padding: 1.5%; background-color: white; color: grey; z-index: 2; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); } #main1 { color: #3399ff; } .content { overflow: hidden; } .row { display: flex; flex-wrap: wrap; padding: 0px 10px; } .card { flex: 25%; max-width: 25%; padding: 0px 4px; } .card p { float: left; background-color: white; box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2); border-radius: 5px; padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; transition: 0.3s; margin-top: 8px; vertical-align: middle; } .card p:hover { box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2); } .card a { float: left; color: grey; text-align: center; text-decoration: none; display: block; border-radius: 5px; padding: 2%; transition: 0.3s; } .card a:hover { box-shadow: 0px 3px 10px rgba(0,0,0,0.1); background-color: #fbfbfb; color: #3399ff; } .card-home { position: relative; margin-right: 10%; margin-left: 10%; margin-top: 5%; margin-bottom: 10%; } .card-home p { float: left; background-color: white; box-shadow: 0px 4px 8px 1px rgba(0,0,0,0.2); border-radius: 5px; padding: 30px; font-size: 120%; transition: 0.3s; margin-top: 8px; vertical-align: middle; } .card-home p:hover { box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.2); } .card-home a { float: left; color: grey; text-align: center; text-decoration: none; display: block; border-radius: 5px; padding: 1%; transition: 0.3s; } .card-home a:hover { box-shadow: 0px 3px 10px rgba(0,0,0,0.1); background-color: #fbfbfb; color: #3399ff; } .navigation { z-index: 1; width: 100%; list-style-type: none; background-color: white; box-shadow: 0px 3px 25px rgba(0,0,0,0.2); position: -webkit-sticky; position: sticky; top: 0px; padding-top: 0px; height: auto; } #sidebar { width: 100%; } li { float: left; } li a, .dropbtn { background-color: white; display: block; text-align: center; width: 100%; height: auto; padding: 15px; font-size: 100%; color: grey; text-decoration: none; cursor: pointer; transition: 0.5s; } li a:hover:not(.active), .dropdown:hover .dropbtn { background-color: #f2f2f2; } @media (screen and max-width: 1500px) { .card { flex: 50%; max-width: 50%; } } @media (max-width: 800px) { li { float: none; } .card { margin-top: 4.2em; flex: 100%; max-width: 100%; } .card-home { margin-top: 5em; margin-left: 20px; margin-right: 20px; } .navigation { z-index: 2; height: 100%; width: 0; position: fixed; background-color: #e6e6e6; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } li { background: #e6e6e6; } li a, .dropbtn { background-color: #e6e6e6; float: left; text-align: left; padding: 10px; width: 100%; text-decoration: none; font-size: 25px; display: inline-block; z-index: 1; } .closebtn { width: auto; float: right; padding: 6px 16px 6px 16px; position: absolute; text-align: center; top: 5px; right: 5px; font-size: 36px; margin-left: 50px; } .about a { float: left; } .closebtn:hover { border-radius: 50%; } #main1 { transition: margin-left 0.5s; } #main2 { transition: margin-left 0.5s; } .header { position: fixed; box-shadow: 0px 3px 25px rgba(0,0,0,0.2); } .header span { padding: 5px; } #sidebar { width: 0px; } .open #sidebar{ width:250px; } .open #main1 { margin-left:250px; } .open #main2 { margin-left:250px; } .show #myDropdown { display: block; position: relative; box-shadow: 0px 0px 0px 0px rgba(0,0,0,0); } } @media (min-width: 800px) { .closebtn { display: none; } .header span { display: none; } .dropdown i { display: none; } .dropdown:hover .dropdown-content { display: block; } .show #myDropdown { display: block; } .bottom { border-radius: 0px 0px 5px 5px; } .dropdown-content { background-color: #f2f2f2; } .about { float: right; position: relative; } } li .dropdown { display: inline-block; } .dropdown-content a { text-align: left; color: grey; padding: 12px 16px; text-decoration: none; display: block; background-color: white; } .dropdown-content { display: none; position: absolute; min-width: 103px; box-shadow: 0px 8px 16px 1px rgba(0,0,0,0.3); border-radius: 0px 0px 5px 5px; z-index: 2; } .dropdown button { border: none; } button:focus { outline: none; } .fa-caret-down { float: right; padding-right: 8px; } .active { background-color: #3399ff; color: white; } .active:hover { background-color: #80bfff; transition: 0.5s; } br.clearLeft { clear: left; } 

 <!DOCTYPE html> <html> <head> <title>Home</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel = "stylesheet" href = "style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src = "script.js"></script> </head> <body> <div id = "main1"; class = "header";> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span> Website </div> <div id = "sidebar"; class = "navigation"> <li><a class = "active" href = "Home.html">Home</a></li> <li><a href="News.html">News</a></li> <li><a href="#contact">Contact</a></li> <li class = "dropdown"> <button onclick = "openDrop()" class = "dropbtn"> Dropdown <i class = "fa fa-caret-down"></i> </button> <div id = "myDropdown" class = "dropdown-content"> <a href = "#link1">Link 1</a> <a href = "#link2">Link 2</a> <a class = "bottom"; href = "#link3">Link 3</a> </div> </li> <li class = "about";><a href="#about">About</a></li> <li><a href="javascript:void(0)" onclick="closeNav()" class="closebtn">&times;</a></li> <br class="clearLeft" /> </div> <div id = "main2"; class = "content";> <div class = "card-home";> <p> Lorem ipsum dolor sit amet, mei te semper legimus dissentiunt, pro mollis intellegam et. Pri ad nullam essent. An praesent instructior vel. Falli mediocrem quo at, tollit ornatus ut eos. Pro ea munere commune, ex qui possit prompta elaboraret, ea pro audiam disputando. Per suas gubergren ne. Primis civibus per te. Per no ignota imperdiet. Duo no nemore eripuit ponderum, cum at delectus disputando, dicant veniam perfecto vix id. Cum eu euripidis omittantur efficiantur, at invenire disputationi eos. Meis abhorreant mea te, at vidisse mnesarchum qui. Vis feugait electram consequuntur an. Nec an dicit mundi sententiae, te sea possim appetere contentiones. Eu nec facete neglegentur, nec te quaestio repudiandae. Duo clita interesset ut, nulla detracto scriptorem sit ex, phaedrum argumentum no eum. Ut alia vide mazim eam, dicunt pericula principes duo no, cu ius tollit delectus. In mea habeo docendi theophrastus, no vis pertinax gloriatur. Ad ocurreret consulatu persequeris quo, his amet bonorum ad, ea eos oblique nominati assentior. Solet affert legimus vel id, eu his vide quas utinam, partem scripserit his te. Per ne agam labore aliquam. Tota sententiae cum eu. Nulla malorum maluisset no per. Te eos wisi facer probatus, mazim possit adversarium ex eum, ex vel mollis eloquentiam. Quot quaeque alterum mei ut, ex eum laboramus aliquando. Alienum dolores dissentias eum ea, dicta sonet scribentur mel et. At sea congue dignissim, labore alienum ne eum. Tantas offendit ad pri, has feugait erroribus ea, ea vim tibique vulputate. Pro minimum detraxit recteque cu, dico nullam fastidii sit id, sonet disputationi ne nam. <br /> <br /> <a href = "#link";>Link</a> </p> </div> </div> </body> </html> 

Answer 3

Try this:

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
  var openDropdown = dropdowns[i];
  if (openDropdown.classList.contains('show')) {
    openDropdown.classList.remove('show');
      }
    }
  }
}