Develop Reference

I have three drop down button I want to click the specific dropdown and pop up the list and display on the that specific click dropdown , not in all

I have three drop down button that I style them using the same class. When I click any of them it pops up a list where I select any list under the dropdown and display it on the button.
The problem is that it's displaying in all of the three dropdowns even though I focus on the specific drop down and I am voiding to have along code by changing each an every dropdown an ID and target on it. If there's away to do it may you please help.
.dropdownbox>button {
color: #7C99AA;
background-color: white;
border: 1px solid #7C99AA;
border-radius: 0.5em;
padding: 0.7em 1em;
width: 10vw;
font-size: 12px;
line-height: 1.4em;
user-select: none;
cursor: pointer;
text-indent: 1px;
text-overflow: '';
text-align: center;
outline: none;
text-align: center;
}
ul.menu {
list-style: none;
position: absolute;
margin: 0 auto;
width: 8vw;
overflow: hidden;
height: 0px;
margin-top: 2px;
background: white;
color: #9FA5B5;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0.5em 1em rgb(0, 0, 0, 0.2);
padding: 5px 20;
position: absolute;
}
ul.menu li {
font-size: 16px;
padding: 0.7em 0em;
margin: -0.3em 0;
border-radius: 0.5em;
cursor: pointer;
}
ul.menu li:hover {
color: white;
background: #7C99AA;
}
.menu.showMenu {
height: 20vh;
}
<div class="wrapCollect3">
<div class="dropdownbox">
<button class="dropbtn" id="penaltybtn">Select</button>
</div>
<ul id="menu3" class="menu">
<li id="applicc">Not Applicable</li>
<li id="appYes">Yes</li>
<li id="appNo">No</li>
</ul>
</div>
<div class="wrapper">
<div class="dropdownbox">
<button class="dropbtn" id="offboarding">Select</button>
</div>
<ul id="menu1" class="menu">
<li name="offboarding" id="resignation">Resignation</li>
<li name="offboarding" id="contract">Contract Expiration</li>
<li name="offboarding" id="retrenchment">Retrenchment</li>
<li name="offboarding" id="dismissal">Dismissal</li>
<li name="offboarding" id="retirement">Retirement</li>
</ul>
</div>
<div class="collecWrap">
<div class="dropdownbox">
<button class="dropbtn" id="dropbtn">Collected</button>
</div>
<ul id="menu2" class="menu">
<li id="returnNot" value="NotReturned">Not Returned</li>
<li id="majority" value="majority">Majority Returned</li>
<li id="all">All Returned</li>
</ul>
</div>

You can try it like this:
$('.dropdownbox').click(function() {
$('.menu').hide();
$(this).next('.menu').show();
});
I've also changed your css a little bit. I've removed height:0px from ul.menu and added display:none;
$('.dropdownbox').click(function() {
$('.menu').hide();
$(this).next('.menu').show();
});
.dropdownbox>button {
color: #7C99AA;
background-color: white;
border: 1px solid #7C99AA;
border-radius: 0.5em;
padding: 0.7em 1em;
width: 10vw;
font-size: 12px;
line-height: 1.4em;
user-select: none;
cursor: pointer;
text-indent: 1px;
text-overflow: '';
text-align: center;
outline: none;
text-align: center;
}
ul.menu {
list-style: none;
position: absolute;
margin: 0 auto;
width: 8vw;
overflow: hidden;
margin-top: 2px;
background: white;
color: #9FA5B5;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0.5em 1em rgb(0, 0, 0, 0.2);
padding: 5px 20px;
position: absolute;
display:none;
}
ul.menu li {
font-size: 16px;
padding: 0.7em 0em;
margin: -0.3em 0;
border-radius: 0.5em;
cursor: pointer;
}
ul.menu li:hover {
color: white;
background: #7C99AA;
}
.menu.showMenu {
height: 20vh;
}
.wrapper,.wrapCollect3,.collectWrap{
display: inline-block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapCollect3">
<div class="dropdownbox">
<button class="dropbtn" id="penaltybtn">Select</button>
</div>
<ul id="menu3" class="menu">
<li id="applicc">Not Applicable</li>
<li id="appYes">Yes</li>
<li id="appNo">No</li>
</ul>
</div>
<div class="wrapper">
<div class="dropdownbox">
<button class="dropbtn" id="offboarding">Select</button>
</div>
<ul id="menu1" class="menu">
<li name="offboarding" id="resignation">Resignation</li>
<li name="offboarding" id="contract">Contract Expiration</li>
<li name="offboarding" id="retrenchment">Retrenchment</li>
<li name="offboarding" id="dismissal">Dismissal</li>
<li name="offboarding" id="retirement">Retirement</li>
</ul>
</div>
<div class="collecWrap">
<div class="dropdownbox">
<button class="dropbtn" id="dropbtn">Collected</button>
</div>
<ul id="menu2" class="menu">
<li id="returnNot" value="NotReturned">Not Returned</li>
<li id="majority" value="majority">Majority Returned</li>
<li id="all">All Returned</li>
</ul>
</div>

You are not too clear in your answer, and you are providing no working code,
But If I get it, you need to show on the button the text you click in the submenu, like "emulating a select".
It's quite easy.
So, on the 3 main parents add a class
<div class="wrapCollect3 buttonParent">
[...]
<div class="wrapper buttonParent">
[...]
<div class="collecWrap buttonParent">
In js, add a function to retrieve them on click
function getParentByClass(el, className, maxDepth=10) {
let i=0;
while (!el.classList.contains(className)) {
el=el.parentElement;
i++;
if (i>maxDepth) return false;
}
return el;
}
call it like this:
// In your onclick function,
// given "el" as the clicked submenu button
let parent = getParentByClass(el, "buttonParent")
Now find the button inside the buttonParent of the clicked submenu, and set its text as the text you clicked in the submenu
parent.querySelector('button').innerText = el.getText();
Now you just need to fix the "hide" submenu when you click outside the submenu. I leave this exercise to you, because this is not "code solution" website, and we are here always to learn! Cheers!
/// Taken from Carsten Løvbo Andersen answer
$('.dropdownbox').click(function() {
$('.menu').hide();
$(this).next('.menu').show();
});
//// Maybe there is some jquery version, but this is universal
/// this find parent by class name, giving a depth in search too
function getParentByClass(el, className, maxDepth=10) {
let i=0;
while (!el.classList.contains(className)) {
el=el.parentElement;
i++;
if (i>maxDepth) return false;
}
return el;
}
document.querySelectorAll("ul.menu li").forEach(function(el){
el.addEventListener('click', function(c){
let li = c.target;
let t = li.innerText;
let p = getParentByClass(li, 'parentButton');
p.querySelector('button').innerText = t;
$('.menu').hide();
});
});
.dropdownbox>button {
color: #7C99AA;
background-color: white;
border: 1px solid #7C99AA;
border-radius: 0.5em;
padding: 0.7em 1em;
width: 10vw;
font-size: 12px;
line-height: 1.4em;
user-select: none;
cursor: pointer;
text-indent: 1px;
text-overflow: '';
text-align: center;
outline: none;
text-align: center;
}
ul.menu {
list-style: none;
position: absolute;
margin: 0 auto;
width: 8vw;
overflow: hidden;
margin-top: 2px;
background: white;
color: #9FA5B5;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0.5em 1em rgb(0, 0, 0, 0.2);
padding: 5px 20px;
position: absolute;
display:none;
}
ul.menu li {
font-size: 16px;
padding: 0.7em 0em;
margin: -0.3em 0;
border-radius: 0.5em;
cursor: pointer;
}
ul.menu li:hover {
color: white;
background: #7C99AA;
}
.menu.showMenu {
height: 20vh;
}
.wrapper,.wrapCollect3,.collectWrap{
display: inline-block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapCollect3 parentButton">
<div class="dropdownbox">
<button class="dropbtn" id="penaltybtn">Select</button>
</div>
<ul id="menu3" class="menu">
<li id="applicc">Not Applicable</li>
<li id="appYes">Yes</li>
<li id="appNo">No</li>
</ul>
</div>
<div class="wrapper parentButton">
<div class="dropdownbox">
<button class="dropbtn" id="offboarding">Select</button>
</div>
<ul id="menu1" class="menu">
<li name="offboarding" id="resignation">Resignation</li>
<li name="offboarding" id="contract">Contract Expiration</li>
<li name="offboarding" id="retrenchment">Retrenchment</li>
<li name="offboarding" id="dismissal">Dismissal</li>
<li name="offboarding" id="retirement">Retirement</li>
</ul>
</div>
<div class="collecWrap parentButton">
<div class="dropdownbox">
<button class="dropbtn" id="dropbtn">Collected</button>
</div>
<ul id="menu2" class="menu">
<li id="returnNot" value="NotReturned">Not Returned</li>
<li id="majority" value="majority">Majority Returned</li>
<li id="all">All Returned</li>
</ul>
</div>

I want to scroll or point that alphabet when clicked in menu

Menu and Alphabet Selection
In this project, the user can search for that particular alphabet's Word by clicking on the alphabet listed in Menu.
To see the menu click on the Alphabet header with black Background.
⚠️Important thing test it on full screen
What I want is that I click on the alphabets on the list in the menu then the screen should point or scroll to the Alphabet I have clicked on.
function wordbar(){
let y = document.getElementById("Invisible");
if(y.className === "Hiddenbox"){
document.querySelector("body").style.overflow = "hidden";
document.getElementById("Invisible").style.visibility = "visible";
}else{
document.querySelector("body").style.overflow = "auto";
document.getElementById("Invisible").style.display = "none";
}
}
function Removebar(){
const hiddenbox = document.getElementById("Invisible").className;
if(hiddenbox === "Hiddenbox"){
document.querySelector("body").style.overflow = "auto";
document.getElementById("Invisible").style.visibility = "hidden";
}else{
document.querySelector("body").style.overflow = "";
document.getElementById("Invisible").style.display = "";
}
}
body{
overflow: auto;
}
.Mainbox{
width: 100%;
}
h2{
height: 30px;
font-family: montserrat;
color: white;
background-color: black;
padding: 10px;
padding-left: 40px;
position: sticky;
top: 10px;
border-radius: 5px;
cursor: pointer;
}
li{
font-family: poppins;
list-style: none;
height: 40px;
display: flex;
align-items: center;
margin-bottom: 10px;
border-bottom: 1px solid grey;
padding-left: 40px;
}
ul{
padding: 0px;
}
.Hiddenbox{
visibility: hidden;
margin-top: 10px;
width: 100%;
padding: 10px 0px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
left: 0px;
height: 100vh;
box-sizing: border-box;
/* background-color: #d2d2d2;
*/
position: fixed;
top: 0px;
}
.container{
width: 45%;
padding: 30px 50px 10px;
display: flex;
justify-content: center;
align-content: space-around;
flex-wrap: wrap;
column-gap: 10px;
max-height: 400px;
height: 300px;
border: 1px solid dimgrey;
background-color: black;
border-radius: 8px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(50px);
position: relative;
}
.click-lines{
width: 50px;
height: 50px;
display: flex;
align-items: center;
font-size: 16px;
justify-content: center;
border: 1px solid dimgrey;
border-radius: 0.5em;
padding: 0px;
transition: all 0.1s ease;
color: white;
text-align: auto;
cursor: pointer;
}
.click-lines:hover{
background-color: white;
color: black;
border: 1px solid grey;
transform: scale(1.04);
}
.togglebar{
color: white;
font-size: 30px;
padding: 0px;
border: 0px;
width: 30px;
height: auto;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
#media screen and (max-width: 600px){
.click-lines{
width: 30px;
height: 30px;
}
}
<div class="Mainbox" id="box">
<h2 href="javascript:void()" onclick="wordbar()" id="A-letter">A</h2>
<ul>
<li>Apple</li>
<li>Appiv</li>
<li>Ananus</li>
<li>Ambar</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()">B</h2>
<ul>
<li>Bejing</li>
<li>brothal</li>
<li>brother</li>
<li>Banana</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" >C</h2>
<ul>
<li>Cat</li>
<li>cow</li>
<li>calculas</li>
<li>car</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()">D</h2>
<ul>
<li>Dat</li>
<li>Dow</li>
<li>Dalculas</li>
<li>Dar</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()">E</h2>
<ul>
<li>Eat</li>
<li>Eow</li>
<li>Ealculas</li>
<li>Ear</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()">F</h2>
<ul>
<li>Feet</li>
<li>Form</li>
<li>fungus</li>
<li>Fan</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()">G</h2>
<ul>
<li>Grasp</li>
<li>Grow</li>
<li>Game</li>
<li>Goat</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()">H</h2>
<ul>
<li>hola</li>
<li>Hampter</li>
<li>Hercules</li>
<li>Hear</li>
</ul>
</div>
<div class="Hiddenbox" id="Invisible">
<div class="container">
<li href="#A" onclick="Removebar()" class="click-lines">A</li>
<li href="#B" onclick="Removebar()" class="click-lines">B</li>
<li href="#C" onclick="Removebar()" class="click-lines">C</li>
<li href="#D" onclick="Removebar()" class="click-lines">D</li>
<li href="#E" onclick="Removebar()" class="click-lines">E</li>
<li href="#F" onclick="Removebar()" class="click-lines">F</li>
<li href="#G" onclick="Removebar()" class="click-lines">G</li>
<li href="#H" onclick="Removebar()" class="click-lines">H</li>
<li href="#I" onclick="Removebar()" class="click-lines">I</li>
<li href="#J" onclick="Removebar()"class="click-lines">J</li>
<li href="#K" onclick="Removebar()"class="click-lines">K</li>
<li href="#L" onclick="Removebar()"class="click-lines">L</li>
<li href="#M" onclick="Removebar()"class="click-lines">M</li>
<li href="#N" onclick="Removebar()"class="click-lines">N</li>
<li href="#O" onclick="Removebar()"class="click-lines">O</li>
<li href="#P" onclick="Removebar()"class="click-lines">P</li>
<li href="#Q" onclick="Removebar()"class="click-lines">Q</li>
<li href="#R" onclick="Removebar()"class="click-lines">R</li>
<li href="#S" onclick="Removebar()"class="click-lines">S</li>
<li href="#T" onclick="Removebar()"class="click-lines">T</li>
<li href="#U" onclick="Removebar()"class="click-lines">U</li>
<li href="#V" onclick="Removebar()"class="click-lines">V</li>
<li href="#W" onclick="Removebar()"class="click-lines">W</li>
<li href="#X" onclick="Removebar()"class="click-lines">X</li>
<li href="#Y" onclick="Removebar()"class="click-lines">Y</li>
<li href="#Z" onclick="Removebar()"class="click-lines">Z</li>
<li class="togglebar" href="javascript:void(0)" onclick="Removebar()" >×</li>
</div>
</div>

Edit - fixing scrolling up problem
We can't get your items ' position correctly because you are using position relative. Instead, we will use the more bulletproof version - element.getBoundingClientRect().
this method returns a DOMRect object providing information about the
size of an element and its position relative to the viewport
So we eventually get the top, right, down and left offset positions relative to the viewport.
we will use that to get the top offset and scroll to it in the following manner
let letterElement = document.querySelector(`#${letter}-letter`);
window.scrollTo(0, letterElement.getBoundingClientRect().top);
instead of:
document.getElementById(`${letter}-letter`).scrollIntoView();
Now it should work flawlessly (I also changed the fiddle below for you to see).
You are actually pretty close to solving it in your current implementation!
you should add a variable to your removeBar() function to hold the selected letter and use scrollIntoView when selecting its ID.
lets take the letter A, on its <h2> tag you have the id "a-letter". to scroll it into view, you should add to the function that is called on A button onClick event the letter 'A', i.e.
<li href="#A" onclick="Removebar('a')" class="click-lines">A</li>
then, in your removeBar() function declare the variable inside the parentheses, removeBar(letter).
now we can catch the id, and scrollIntoView.
the full code:
function wordbar(){
let y = document.getElementById("Invisible");
if(y.className === "Hiddenbox"){
document.querySelector("body").style.overflow = "hidden";
document.getElementById("Invisible").style.visibility = "visible";
}else{
document.querySelector("body").style.overflow = "auto";
document.getElementById("Invisible").style.display = "none";
}
}
function Removebar(letter){
const hiddenbox = document.getElementById("Invisible").className;
if(hiddenbox === "Hiddenbox"){
document.querySelector("body").style.overflow = "auto";
document.getElementById("Invisible").style.visibility = "hidden";
let letterElement = document.querySelector(`#${letter}-letter`);
window.scrollTo(0,letterElement.getBoundingClientRect().top);
}else{
document.querySelector("body").style.overflow = "";
document.getElementById("Invisible").style.display = "";
}
}
body{
overflow: auto;
}
.Mainbox{
width: 100%;
}
h2{
height: 30px;
font-family: montserrat;
color: white;
background-color: black;
padding: 10px;
padding-left: 40px;
position: sticky;
top: 10px;
border-radius: 5px;
cursor: pointer;
}
li{
font-family: poppins;
list-style: none;
height: 40px;
display: flex;
align-items: center;
margin-bottom: 10px;
border-bottom: 1px solid grey;
padding-left: 40px;
}
ul{
padding: 0px;
}
.Hiddenbox{
visibility: hidden;
margin-top: 10px;
width: 100%;
padding: 10px 0px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
left: 0px;
height: 100vh;
box-sizing: border-box;
/* background-color: #d2d2d2;
*/
position: fixed;
top: 0px;
}
.container{
width: 45%;
padding: 30px 50px 10px;
display: flex;
justify-content: center;
align-content: space-around;
flex-wrap: wrap;
column-gap: 10px;
max-height: 400px;
height: 300px;
border: 1px solid dimgrey;
background-color: black;
border-radius: 8px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(50px);
position: relative;
}
.click-lines{
width: 50px;
height: 50px;
display: flex;
align-items: center;
font-size: 16px;
justify-content: center;
border: 1px solid dimgrey;
border-radius: 0.5em;
padding: 0px;
transition: all 0.1s ease;
color: white;
text-align: auto;
cursor: pointer;
}
.click-lines:hover{
background-color: white;
color: black;
border: 1px solid grey;
transform: scale(1.04);
}
.togglebar{
color: white;
font-size: 30px;
padding: 0px;
border: 0px;
width: 30px;
height: auto;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
#media screen and (max-width: 600px){
.click-lines{
width: 30px;
height: 30px;
}
}
<div class="Mainbox" id="box">
<h2 href="javascript:void()" onclick="wordbar()" id="a-letter">A</h2>
<ul>
<li>Apple</li>
<li>Appiv</li>
<li>Ananus</li>
<li>Ambar</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" id="b-letter">B</h2>
<ul>
<li>Bejing</li>
<li>brothal</li>
<li>brother</li>
<li>Banana</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" id="c-letter">C</h2>
<ul>
<li>Cat</li>
<li>cow</li>
<li>calculas</li>
<li>car</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" id="d-letter">D</h2>
<ul id="d-words">
<li>Dat</li>
<li>Dow</li>
<li>Dalculas</li>
<li>Dar</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" id="e-letter">E</h2>
<ul>
<li>Eat</li>
<li>Eow</li>
<li>Ealculas</li>
<li>Ear</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" id="f-letter">F</h2>
<ul>
<li>Feet</li>
<li>Form</li>
<li>fungus</li>
<li>Fan</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" id="g-letter">G</h2>
<ul>
<li>Grasp</li>
<li>Grow</li>
<li>Game</li>
<li>Goat</li>
</ul>
<h2 href="javascript:void()" onclick="wordbar()" id="h-letter">H</h2>
<ul id="h-words">
<li>hola</li>
<li>Hampter</li>
<li>Hercules</li>
<li>Hear</li>
</ul>
</div>
<div class="Hiddenbox" id="Invisible">
<div class="container">
<li href="#A" onclick="Removebar('a')" class="click-lines">A</li>
<li href="#B" onclick="Removebar('b')" class="click-lines">B</li>
<li href="#C" onclick="Removebar('c')" class="click-lines">C</li>
<li href="#D" onclick="Removebar('d')" class="click-lines">D</li>
<li href="#E" onclick="Removebar('e')" class="click-lines">E</li>
<li href="#F" onclick="Removebar('f')" class="click-lines">F</li>
<li href="#G" onclick="Removebar('g')" class="click-lines">G</li>
<li href="#H" onclick="Removebar('h')" class="click-lines">H</li>
<li href="#I" onclick="Removebar('i')" class="click-lines">I</li>
<li href="#J" onclick="Removebar()"class="click-lines">J</li>
<li href="#K" onclick="Removebar()"class="click-lines">K</li>
<li href="#L" onclick="Removebar()"class="click-lines">L</li>
<li href="#M" onclick="Removebar()"class="click-lines">M</li>
<li href="#N" onclick="Removebar()"class="click-lines">N</li>
<li href="#O" onclick="Removebar()"class="click-lines">O</li>
<li href="#P" onclick="Removebar()"class="click-lines">P</li>
<li href="#Q" onclick="Removebar()"class="click-lines">Q</li>
<li href="#R" onclick="Removebar()"class="click-lines">R</li>
<li href="#S" onclick="Removebar()"class="click-lines">S</li>
<li href="#T" onclick="Removebar()"class="click-lines">T</li>
<li href="#U" onclick="Removebar()"class="click-lines">U</li>
<li href="#V" onclick="Removebar()"class="click-lines">V</li>
<li href="#W" onclick="Removebar()"class="click-lines">W</li>
<li href="#X" onclick="Removebar()"class="click-lines">X</li>
<li href="#Y" onclick="Removebar()"class="click-lines">Y</li>
<li href="#Z" onclick="Removebar()"class="click-lines">Z</li>
<li class="togglebar" href="javascript:void(0)" onclick="Removebar()" >×</li>
</div>
</div>

Here's some scrolling on the cheap.
CSS
html {
scroll-behavior: smooth;
}
HTML
<a href=#ID>ID</a>
<h1 id='ID'>ID</h1>
html {
scroll-behavior: smooth;
}
nav {
position: fixed;
top: 0;
}
menu {
display: flex;
margin-left: 40px;
list-style: none;
}
li {
margin: 0 10px;
}
section {
min-height: 300vh;
}
<nav>
<menu>
<li><a href='#top'>Top</a></li>
<li><a href='#mid'>Mid</a></li>
<li><a href='#sub'>Sub</a></li>
</menu>
</nav>
<section>
<h1 id='top'>TOP</h1>
<hr>
</section>
<section>
<h1 id='mid'>MID</h1>
<hr>
</section>
<section>
<h1 id='sub'>SUB</h1>
<hr>
</section>

Why doesn't my dropdown menu show on click?

I want to do what you see in the picture. When the Settings button is clicked, this window opens and the user goes to what he wants. However, when I click the button, nothing happens.
https://www.hizliresim.com/qqbx1t4
It works when I copy the "li" part and paste it into the dropdown menu projects on the internet. I think the problem is in the buttons and ul tags.
function settings_click() {
document.getElementById("settings_dropdown").classList.toggle("Show");
}
window.onclick = function(event) {
if (!event.target.matches('.settings_style')) {
var dropdowns = document.getElementsByClassName("settings_tools");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[1];
if (openDropdown.classList.contains('Show')) {
openDropdown.classList.remove('Show');
}
}
}
}
.settings {
position: relative;
display: inline-block;
}
.settings_style {
cursor: pointer;
width: 100%;
text-align: left;
color: #70757a;
display: block;
padding: 15px;
white-space: nowrap;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
border: none;
background: none;
margin: 0;
box-sizing: border-box;
align-items: flex-start;
}
.settings_style:hover {
text-decoration: underline;
}
.settings_tools {
display: none;
position: absolute;
background-color: red;
overflow: auto;
z-index: 1;
}
.settings_button {
min-width: 200px;
}
.li {
display: list-item;
list-style: none;
font-size: 14px;
margin: 0;
padding: 0;
}
.search_settings {
color: #70757a;
display: block;
padding: 15px;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
list-style: none;
}
.Show {
display: block;
}
<div class="settings">
<button class="settings_style" id="test" onclick="settings_click()" aria-haspopup="true" aria-controls="settings_dropdown">Ayarlar</button>
<ul class="settings_tools" id="settings_dropdown" role="menu" aria-labelledby="test" style="bottom: 46px; right: 0px; display: none;">
<li role="none">
<a class="search_settings" href="https://www.google.com/preferences?hl=tr&fg=1" role="menuitem" tabindex="-1">Arama ayarları</a>
</li>
<li role="none">
<a class="search_settings" href="/advanced_search?hl=tr&fg=1" role="menuitem" tabindex="-1">Gelişmiş arama</a>
</li>
<li role="none">
<a class="search_settings" href="https://myactivity.google.com/privacyadvisor/search?utm_source=googlemenu&fg=1" role="menuitem" tabindex="-1">Arama'daki verileriniz</a>
</li>
<li role="none">
<a class="search_settings" href="https://myactivity.google.com/product/search?utm_source=google&hl=tr&fg=1" role="menuitem" tabindex="-1">Arama geçmişi</a>
</li>
<li role="none">
<a class="search_settings" href="https://support.google.com/websearch/?p=ws_results_help&hl=tr&fg=1" role="menuitem" tabindex="-1">Arama yardımı</a>
</li>
<li role="none">
<button class="search_settings" data-bucket="websearch" role="menuitem" tabindex="-1">Geri bildirim gönder</button>
</li>
</ul>
</div>

Here's some refinement. You may have to make it more clear what's going wrong now that we see something happening.
function settings_click() {
document.getElementById("settings_dropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.classList.contains('settings_style')) {
var dropdowns = document.getElementsByClassName("settings_tools");
for (let i = 0; i < dropdowns.length; i++) {
dropdowns[0].classList.remove('show');
}
}
}
.settings {
position: relative;
display: inline-block;
}
.settings_style {
cursor: pointer;
width: 100%;
text-align: left;
color: #70757a;
display: block;
padding: 15px;
white-space: nowrap;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
border: none;
background: none;
margin: 0;
box-sizing: border-box;
align-items: flex-start;
}
.settings_style:hover {
text-decoration: underline;
}
.settings_tools {
display: none;
position: absolute;
background-color: red;
overflow: auto;
z-index: 1;
}
.settings_button {
min-width: 200px;
}
.li {
display: list-item;
list-style: none;
font-size: 14px;
margin: 0;
padding: 0;
}
.search_settings {
color: #70757a;
display: block;
padding: 15px;
white-space: nowrap;
text-decoration: none;
cursor: pointer;
list-style: none;
}
.settings_tools.show {
display: block !important;
}
<div class="settings">
<button class="settings_style" id="test" onclick="settings_click()" aria-haspopup="true" aria-controls="settings_dropdown">Ayarlar</button>
<ul class="settings_tools" id="settings_dropdown" role="menu" aria-labelledby="test" style="display: none;">
<li role="none">
<a class="search_settings" href="https://www.google.com/preferences?hl=tr&fg=1" role="menuitem" tabindex="-1">Arama ayarları</a>
</li>
<li role="none">
<a class="search_settings" href="/advanced_search?hl=tr&fg=1" role="menuitem" tabindex="-1">Gelişmiş arama</a>
</li>
<li role="none">
<a class="search_settings" href="https://myactivity.google.com/privacyadvisor/search?utm_source=googlemenu&fg=1" role="menuitem" tabindex="-1">Arama'daki verileriniz</a>
</li>
<li role="none">
<a class="search_settings" href="https://myactivity.google.com/product/search?utm_source=google&hl=tr&fg=1" role="menuitem" tabindex="-1">Arama geçmişi</a>
</li>
<li role="none">
<a class="search_settings" href="https://support.google.com/websearch/?p=ws_results_help&hl=tr&fg=1" role="menuitem" tabindex="-1">Arama yardımı</a>
</li>
<li role="none">
<button class="search_settings" data-bucket="websearch" role="menuitem" tabindex="-1">Geri bildirim gönder</button>
</li>
</ul>
</div>

JQuery show/hide and collapse if click outside

I've started playing around with JQuery in the last week, and I'm needing some help understanding what I am doing incorrectly. I'm sure this is very simple, but please be patient as I am learning.
End result: When you click "Open Menu" - then the notification menu opens. If you click outside of the ul class ".profiledrop" then the notification menu closes.
// Tab collapser //
$('.notification-tab').click(function(e) {
if ($(e.currentTarget).parent().hasClass('active')) {
$('.notification-group').removeClass('active');
} else {
$('.notification-group').removeClass('active');
$(e.currentTarget).parent().toggleClass('active');
}
});
// Click outside collapser //
$(document).on('click', function(e) {
if ($(e.target).closest(".profiledrop").length === 0) {
$(".profiledrop").hide();
}
});
// Menu Launcher //
$("#launch").click(function() {
$(".profiledrop").show();
});
/* Notification Infastructure */
.profiledrop {
display: none;
width: 350px;
height: auto;
max-height: 600px;
padding: 0;
margin: 0;
overflow-y: hidden;
background: #eee;
border-top: 4px solid #5B7042;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
}
.notification-group {
border-bottom: 1px solid #e3e3e3;
overflow: hidden;
}
.notification-tab {
width: 100%;
display: inline-block;
border-bottom: 1px solid #e3e3e3;
}
.notification-list {
height: 0px;
max-height: 250px;
padding: 0;
overflow-y: auto;
transition: height .5s;
}
.notification-list-item {
display: block;
min-height: 60px;
overflow: hidden !important;
box-sizing: border-box !important;
padding: 15px 15px 15px 10px;
font-size: 16px;
border-bottom: 1px solid #e3e3e3
}
.notification-list-item:nth-child(even) {
background-color: #E3E3E3
}
.notification-list-item img {
clip-path: circle();
float: left;
margin-right: 10px;
width: 60px;
height: 60px;
object-fit: cover
}
/* Misc Settings */
.message::not(.nopic) {
margin-top: 0px;
margin-left: 80px
}
/* Style for notification groups without image */
/* Notification text styling */
.label {
float: right;
padding: 0px 7px;
margin-top: 20px;
margin-right: 10px;
border: 1px solid #5B7042;
border-radius: 15px;
}
h4 {
margin-left: 10px
}
h4,
.label {
display: inline-block;
}
.message {
margin-top: 0px
}
.date {
float: right;
color: darkgray
}
/* Active Section */
.active .notification-list {
height: 250px;
}
.active .notification-tab,
.notification-tab:hover {
background-color: #5B7042
}
.active .label,
.notification-tab:hover .label {
border: 1px solid white
}
.notification-tab:hover {
color: white
}
.active .label,
.active h4 {
color: white
}
/* Responsive design */
#media only screen and (max-width: 514px) {
body {
margin: 0px
}
.profiledrop {
width: 100%;
margin: 0px;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://mrdansby.com/private/style.css">
<div class="dropdown-container">
<a href="#" id='launch'>Open Menu</a>
<ul class="profiledrop">
<li class="notification-group nopic">
<div class="notification-tab">
<h4>Tasks</h4>
<span class="label">1</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message"><b>Mr. Teacher</b> is requesting you complete the assignment you need to do before the deadline on Monday.</p>
<span class="date">2m ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Behavior</h4>
<span class="label">4</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/4.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5s ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/23.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">15m ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5h ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/13.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Homework</h4>
<span class="label">3/3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
</ul>
</div>

When you click on menu you need to exclude it from you logic of closing the menu.
So create another if if (e.target.id != "launch") { and wrap your closing menu logic in it. You where opening with one event and closing in same time with another:
$(document).on('click', function(e) {
if (e.target.id != "launch") {
if ($(e.target).closest(".profiledrop").length === 0) {
$(".profiledrop").hide();
}
}
});
I would also suggest to use .toggle(); here so you can open and close menu by clicking the button:
// Menu Launcher //
$("#launch").click(function() {
$(".profiledrop").toggle();
});
EXAMPLE:
// Tab collapser //
$('.notification-tab').click(function(e) {
if ($(e.currentTarget).parent().hasClass('active')) {
$('.notification-group').removeClass('active');
} else {
$('.notification-group').removeClass('active');
$(e.currentTarget).parent().toggleClass('active');
}
});
// Click outside collapser //
$(document).on('click', function(e) {
if (e.target.id != "launch") {
if ($(e.target).closest(".profiledrop").length === 0) {
$(".profiledrop").hide();
}
}
});
// Menu Launcher //
$("#launch").click(function() {
$(".profiledrop").toggle();
});
/* Notification Infastructure */
.profiledrop {
display: none;
width: 350px;
height: auto;
max-height: 600px;
padding: 0;
margin: 0;
overflow-y: hidden;
background: #eee;
border-top: 4px solid #5B7042;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
box-shadow: 2px 2px 10px -5px rgba(0, 0, 0, 0.75);
}
.notification-group {
border-bottom: 1px solid #e3e3e3;
overflow: hidden;
}
.notification-tab {
width: 100%;
display: inline-block;
border-bottom: 1px solid #e3e3e3;
}
.notification-list {
height: 0px;
max-height: 250px;
padding: 0;
overflow-y: auto;
transition: height .5s;
}
.notification-list-item {
display: block;
min-height: 60px;
overflow: hidden !important;
box-sizing: border-box !important;
padding: 15px 15px 15px 10px;
font-size: 16px;
border-bottom: 1px solid #e3e3e3
}
.notification-list-item:nth-child(even) {
background-color: #E3E3E3
}
.notification-list-item img {
clip-path: circle();
float: left;
margin-right: 10px;
width: 60px;
height: 60px;
object-fit: cover
}
/* Misc Settings */
.message::not(.nopic) {
margin-top: 0px;
margin-left: 80px
}
/* Style for notification groups without image */
/* Notification text styling */
.label {
float: right;
padding: 0px 7px;
margin-top: 20px;
margin-right: 10px;
border: 1px solid #5B7042;
border-radius: 15px;
}
h4 {
margin-left: 10px
}
h4,
.label {
display: inline-block;
}
.message {
margin-top: 0px
}
.date {
float: right;
color: darkgray
}
/* Active Section */
.active .notification-list {
height: 250px;
}
.active .notification-tab,
.notification-tab:hover {
background-color: #5B7042
}
.active .label,
.notification-tab:hover .label {
border: 1px solid white
}
.notification-tab:hover {
color: white
}
.active .label,
.active h4 {
color: white
}
/* Responsive design */
#media only screen and (max-width: 514px) {
body {
margin: 0px
}
.profiledrop {
width: 100%;
margin: 0px;
left: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-container">
<a href="#" id='launch'>Open Menu</a>
<ul class="profiledrop">
<li class="notification-group nopic">
<div class="notification-tab">
<h4>Tasks</h4>
<span class="label">1</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message"><b>Mr. Teacher</b> is requesting you complete the assignment you need to do before the deadline on Monday.</p>
<span class="date">2m ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Behavior</h4>
<span class="label">4</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/4.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5s ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/23.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">15m ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">5h ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/13.png">
<p class="message"><b>Student</b> was written up by Mr. Teacher.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Homework</h4>
<span class="label">3/3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
<li class="notification-list-item">
<img src="https://mrdansby.com/resources/pics/1.png">
<p class="message">Math homework was added by <b>Mr. Teacher</b>.</p>
<span class="date">3d ago</span>
</li>
</ul>
</li>
</ul>
</div>

Mobile Menu Help, Add parent link to dropdown, disable parent link

I've searched for a while for a way to do what I'm trying to accomplish but came up with nothing that could help me or explain it well enough for me to understand. I have this jsfiddle that I'm working on. I'm having some issues getting this to work the way I'm wanting it to. I would like to clone the parent link into the dropdown area and make sure the parent link is disabled (only on mobile) and only displays the dropdown when clicked. I know this can probably be accomplished by using JS since I cannot edit the HTML that is being outputted by the CMS I am working in. I'm sorry, I'm not very keen in JS, still learning. Please tell me if you need any more information. Thank you so much!
HTML
<div class="main-nav">
<ul id="megaMenu" class="menuContainer nav">
<li class="menuItem"><a class="menuLink" href="resources"><span class="menuText">Resources</span></a>
<div class="content">
<div class="subnav" id="drop-resources">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Resource Library
</li>
<li>Legal Resources
</li>
<li>Ask the Experts
</li>
<li>Community
</li>
<li>Find Storage
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Buyer's Guide
</li>
<li>Upcoming Auctions
</li>
<li>Forms Software
</li>
<li>Self Storage News Magazine
</li>
<a href="/resources/community/open-for-business-blog">
<li>Blog</li>
</a>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem activeItem"><a class="menuLink" href="education"><span class="menuText">Education</span></a>
<div class="content">
<div class="subnav" id="drop-education">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Annual Conference
</li>
<li>Executive Retreat
</li>
<li>Luncheons
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Webinars
</li>
<li>Podcasts
</li>
<li><a target="_blank" href="/photos/txssa/sets/">Luncheon Photos</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem calendarnav"><a class="menuLink" href="calendar"><span class="menuText">Calendar</span></a>
<div class="content">
<div class="subnav" id="drop-calendar">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul id="calendarOptions">
<li>All Calendar Items
</li>
<li>Luncheon Calendar
</li>
<li>Deadline Calendar
</li>
<li>Education Calendar
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membership"><a class="menuLink" href="membership"><span class="menuText">Membership</span></a>
<div class="content">
<div class="subnav" id="drop-membership">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Membership Benefits
</li>
<li>Join REDACTED
</li>
<li>Pay My Dues
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem aboutus"><a class="menuLink" href="about-us"><span class="menuText">About Us</span></a>
<div class="content">
<div class="subnav" id="drop-about">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Contact Us
</li>
<li>Board
</li>
<li>Board Nominations
</li>
<li>Committees
</li>
<li>FAQs
</li>
<li>Charitable Fundraising
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membersonly"><a class="menuLink" href="members-only"><span class="menuText">Members Only</span></a>
<div class="content">
<div id="drop-members" class="subnav">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>My Account
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
CSS
body{
background:#112B50;
}
ul{
list-style:none;
}
.main-nav {
clear: both;
margin-top: 20px;
float: left;
width: 100%;
}
#megaMenu {
float: right;
padding-top: 15px;
position:absolute;
}
.menuItem {
float: left;
position: relative;
}
.menuLink {
display: block;
color: #fff;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right 5px;
text-decoration: none;
padding-right: 15px;
margin-right: 22px;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membersonly .menuLink {
margin: 0;
color: #FC0;
}
.menuItem .content {
display: none;
position: absolute;
top: 15px;
padding-top: 20px;
left: 0;
float: left;
max-width: 344px;
z-index: 10;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 200px;
}
.menuItem:nth-of-type(5) .content {
left: -118px;
}
.menuItem:nth-of-type(6) .content {
left: -82px;
}
.menuItem:hover .content,
.menuItem:active .content,
.menuItem:focus .content {
display: block;
}
.calendarnav:hover .content {
display: none;
}
.subnav {
border: 3px solid #476f93;
background-color: #fff;
float: left;
width: 344px;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
width: 200px;
}
.subnav img {
position: absolute;
top: 11px;
left: 30px;
}
.menuItem:nth-child(5) .subnav img {
left: 146px;
}
.menuItem:nth-child(6) .subnav img {
left: 132px;
}
.membership .left, .aboutus .left, .membersonly .left {
width: 180px;
}
/*******************************************
Media Queries
*******************************************/
#media(max-width:974px){
.header-right {
max-width: 100%;
width:100%;
padding: 15px;
box-sizing: border-box;
}
}
#media(max-width:700px){
.sf_cols.utilityLinks, .utilityLinks{
text-align:center;
}
}
#media(max-width:730px){
.main-nav {
margin-top: 0;
}
#megaMenu {
float: right;
padding-top: 15px;
width: 100%;
position: relative;
box-sizing: border-box;
}
.menuItem {
float: none;
position: relative;
width: 100%;
background-color: transparent; /* changes the background-color of main nav */
padding: 15px;
box-sizing: border-box;
}
.menuLink {
display: block;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right center;
text-decoration: none;
padding-right: 0px;
margin-right: 0px;
color: white;
width: 100%;
height: auto;
}
.menuItem .content {
display: none;
position: relative;
top: 0;
padding-top: 20px;
left: 0;
float: none;
max-width: 100%;
z-index: 10;
margin: 0 auto;
text-align: center;
}
.subnav {
border: 0px;
background-color: #fff;
float: none;
width: 100%;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.content .left, .content .right {
float: none;
max-width: 100%;
width:100%;
padding: 0;
box-sizing: border-box;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
max-width: 100%;
width:100%;
text-align: center;
margin: 0 auto;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 100%;
}
.menuItem:nth-of-type(5) .content {
left: 0;
}
.menuItem:nth-of-type(6) .content {
left: 0;
}
.membersonly .menuLink {
margin: 0 auto;
}
.content li {
border: 1px solid #f1f1f1;
}
#header {
max-height: 100%; /*300px*/
margin-bottom: 45px;
overflow: auto; /*hidden*/
float: none;
}
.header-right, #content {
float: left;
max-width: 715px;
width: 100%;
}
.menuItem:nth-child(5) .subnav img {
left: 50%;
}
.menuItem:nth-child(6) .subnav img {
left: 50%;
}
.subnav img {
left: 50%;
}
}
#media (max-width:600px){
.canidates{
width:100%;
margin-bottom: 15px;
}
.sf_colsOut.sf_2cols_1_50,
.sf_colsOut.sf_2cols_2_50{
width:100%;
}
.sf_2cols_2_50 .sf_2cols_2in_50{
margin-left:0 !important;
}
}
JS
//This JS was on the page already, maybe you can utilize it in someway.
$(document).ready(function(){
var allPanels = $('.sflistItemContent').hide();
$('.sflistListItem:first > .sflistItemContent').show();
$('.sflistItemTitle').click(function() {
allPanels.slideUp();
$('.expanded').removeClass('expanded');
$(this).next().slideDown();
$(this).addClass('expanded');
return false;
});
$('.menuItem:nth-child(3n)').addClass('calendarnav');
$('.menuItem:nth-child(4n)').addClass('membership');
$('.menuItem:nth-child(5n)').addClass('aboutus');
$('.menuItem:nth-child(6n)').removeClass('calendarnav').addClass('membersonly');
// Form input hide/display default text on focus/blur
$(".sfsearchTxt").focus(function() {
if(this.value == this.defaultValue) {
this.value = "";
}
}).blur(function() {
if(!this.value.length) {
this.value = this.defaultValue;
}
});
});

Ok, I worked on this for about an hour and a half, and it was quite some work. Basically, what I did was copy the parent links and added it to their respective dropdown lists as the first item and gave them a class of "clone". That way, using css and media queries, those options only appear on a mobile layout and disappear when you resize the window back to full desktop view. And you said it yourself, yes it requires some javascript to create the click events that will make the dropdowns appear when their respective parent link is clicked. To do that I used "event.preventDefault();" which stops the link from going to the page where it's supposed to take you and then immediately use show() to make the dropdown appear (it will also put away the dropdown list if you click it again using hide(); ). Lastly, using your css, I deactivated the hover effects on the dropdown menus, but only on mobile layouts. The desktop layout has remained intact. Here's the code:
$(document).ready(function(){
if ($(".menuItem").css("float") == "left") {
$(".content").css("display", "");
}
var showDropDown = function(id) {
if ($(".menuItem").css("float") == "none") {
event.preventDefault();
var id = "#" + id;
var dropdownSelector = $(id).parent().children(".content");
if (dropdownSelector.css("display") == "none") {
dropdownSelector.show();
}
else {
dropdownSelector.hide();
dropdownSelector.css("display", "");
}
}
};
$("#resources").click(function() {showDropDown($("#resources").attr("id"))});
$("#education").click(function() {showDropDown($("#education").attr("id"))});
$("#calendar").click(function() {showDropDown($("#calendar").attr("id"))});
$("#membership").click(function() {showDropDown($("#membership").attr("id"))});
$("#about-us").click(function() {showDropDown($("#about-us").attr("id"))});
$("#members-only").click(function() {showDropDown($("#members-only").attr("id"))});
});
body{
background:#112B50;
}
ul{
list-style:none;
}
.main-nav {
clear: both;
margin-top: 20px;
float: left;
width: 100%;
}
#megaMenu {
float: right;
padding-top: 15px;
position:absolute;
}
.menuItem {
float: left;
position: relative;
}
.menuLink {
display: block;
color: #fff;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right 5px;
text-decoration: none;
padding-right: 15px;
margin-right: 22px;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membersonly .menuLink {
margin: 0;
color: #FC0;
}
.menuItem .content {
display: none;
position: absolute;
top: 15px;
padding-top: 20px;
left: 0;
float: left;
max-width: 344px;
z-index: 10;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 200px;
}
.menuItem:nth-of-type(5) .content {
left: -118px;
}
.menuItem:nth-of-type(6) .content {
left: -82px;
}
.menuItem:hover .content,
.menuItem:active .content,
.menuItem:focus .content {
display: block;
}
.calendarnav:hover .content {
display: none;
}
.subnav {
border: 3px solid #476f93;
background-color: #fff;
float: left;
width: 344px;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
width: 200px;
}
.subnav img {
position: absolute;
top: 11px;
left: 30px;
}
.menuItem:nth-child(5) .subnav img {
left: 146px;
}
.menuItem:nth-child(6) .subnav img {
left: 132px;
}
.membership .left, .aboutus .left, .membersonly .left {
width: 180px;
}
.clone {
display:none;
}
/*******************************************
Media Queries
*******************************************/
#media(max-width:974px){
.header-right {
max-width: 100%;
width:100%;
padding: 15px;
box-sizing: border-box;
}
}
#media(max-width:700px){
.sf_cols.utilityLinks, .utilityLinks{
text-align:center;
}
}
#media(max-width:730px){
.main-nav {
margin-top: 0;
}
#megaMenu {
float: right;
padding-top: 15px;
width: 100%;
position: relative;
box-sizing: border-box;
}
.menuItem {
float: none;
position: relative;
width: 100%;
background-color: transparent; /* changes the background-color of main nav */
padding: 15px;
box-sizing: border-box;
}
.menuLink {
display: block;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right center;
text-decoration: none;
padding-right: 0px;
margin-right: 0px;
color: white;
width: 100%;
height: auto;
}
.menuItem .content {
display: none;
position: relative;
top: 0;
padding-top: 20px;
left: 0;
float: none;
max-width: 100%;
z-index: 10;
margin: 0 auto;
text-align: center;
}
.subnav {
border: 0px;
background-color: #fff;
float: none;
width: 100%;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.content .left, .content .right {
float: none;
max-width: 100%;
width:100%;
padding: 0;
box-sizing: border-box;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
max-width: 100%;
width:100%;
text-align: center;
margin: 0 auto;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 100%;
}
.menuItem:nth-of-type(5) .content {
left: 0;
}
.menuItem:nth-of-type(6) .content {
left: 0;
}
.membersonly .menuLink {
margin: 0 auto;
}
.content li {
border: 1px solid #f1f1f1;
}
#header {
max-height: 100%; /*300px*/
margin-bottom: 45px;
overflow: auto; /*hidden*/
float: none;
}
.header-right, #content {
float: left;
max-width: 715px;
width: 100%;
}
.menuItem:nth-child(5) .subnav img {
left: 50%;
}
.menuItem:nth-child(6) .subnav img {
left: 50%;
}
.subnav img {
left: 50%;
}
.menuItem:hover .content {
display: none;
}
.calendarnav:hover .content {
display: none;
}
.clone {
display:block;
}
}
#media (max-width:600px){
.canidates{
width:100%;
margin-bottom: 15px;
}
.sf_colsOut.sf_2cols_1_50,
.sf_colsOut.sf_2cols_2_50{
width:100%;
}
.sf_2cols_2_50 .sf_2cols_2in_50{
margin-left:0 !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-nav">
<ul id="megaMenu" class="menuContainer nav">
<li class="menuItem"><a id="resources" class="menuLink" href="resources"><span class="menuText">Resources</span></a>
<div class="content">
<div class="subnav" id="drop-resources">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Resources
<li>Resource Library
</li>
<li>Legal Resources
</li>
<li>Ask the Experts
</li>
<li>Community
</li>
<li>Find Storage
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Buyer's Guide
</li>
<li>Upcoming Auctions
</li>
<li>Forms Software
</li>
<li>Self Storage News Magazine
</li>
<a href="/resources/community/open-for-business-blog">
<li>Blog</li>
</a>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem activeItem"><a id="education" class="menuLink" href="education"><span class="menuText">Education</span></a>
<div class="content">
<div class="subnav" id="drop-education">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Education
<li>Annual Conference
</li>
<li>Executive Retreat
</li>
<li>Luncheons
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Webinars
</li>
<li>Podcasts
</li>
<li><a target="_blank" href="/photos/txssa/sets/">Luncheon Photos</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem"><a id="calendar" class="menuLink" href="calendar"><span class="menuText">Calendar</span></a>
<div class="content">
<div class="subnav" id="drop-calendar">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul id="calendarOptions">
<li class="clone">Calendar
<li>All Calendar Items
</li>
<li>Luncheon Calendar
</li>
<li>Deadline Calendar
</li>
<li>Education Calendar
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membership"><a id="membership" class="menuLink" href="membership"><span class="menuText">Membership</span></a>
<div class="content">
<div class="subnav" id="drop-membership">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Membership
<li>Membership Benefits
</li>
<li>Join REDACTED
</li>
<li>Pay My Dues
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem aboutus"><a id="about-us" class="menuLink" href="about-us"><span class="menuText">About Us</span></a>
<div class="content">
<div class="subnav" id="drop-about">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">About Us
<li>Contact Us
</li>
<li>Board
</li>
<li>Board Nominations
</li>
<li>Committees
</li>
<li>FAQs
</li>
<li>Charitable Fundraising
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membersonly"><a id="members-only" class="menuLink" href="members-only"><span class="menuText">Members Only</span></a>
<div class="content">
<div id="drop-members" class="subnav">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Members Only
<li>My Account
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
Also here's the jsfiddle where I did my work: http://jsfiddle.net/381nxmuo/