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>

Is there a way to fix this problem of a slideToggle() inside a slideToggle() inside a slideToggle() while using flex-grids?

If you run the code snippet, you'll see that the output is kind of "bugged".
I have been stuck on this for the past 2 days and can't seem to make it work at all.
I tried several solutions found here on stack, but none seem to do it for me. Basically there is Parent, Child1....n, and Grandchild1....n. Whenever i click on the parent, the list with all children should open. And for every child i click, the list with all grandchildren should open.
My code kinda does that, but not in a visually pleasant way.
PS: I am not a web developer and this whole thing is a request from my boss so everything is in fact new for me.
Thank you all and hope this question does not upset anyone.
$(document).ready(function() {
$("#infrtransp").click(function() {
$("#infrtranspUL").slideToggle(1000, "linear");
$("#infrtransp").toggleClass('fa-book fa-book-open');
if ($("#infrtranspFORM").css("display", "none")) {
$("#infrtranspFORM").css("display", "none");
} else {
$("#infrtranspFORM").slideToggle(1000, "linear");
}
});
$("#infrtranspUL").click(function() {
$("#infrtranspFORM").slideToggle(1000, "linear");
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
});
$("#infrtransp").mouseover(function() {
jQuery('#infrtransp').css('cursor', 'pointer');
});
$("#infrtranspUL").mouseover(function() {
jQuery('#infrtranspUL').css('cursor', 'pointer');
});
});
.flex-grid {
display: flex;
align-items: center;
justify-content: center;
background-color: #eceef1;
border-radius: 10px;
font-size: 15px;
-webkit-box-shadow: 0px 0px 7px 1px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 7px 1px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 0px 0px 7px 1px #ccc;
}
.flex-grid .col2 {
flex: 1;
}
.flex-grid {
margin: 0 0 20px 0;
}
.col1 {
background: #eceef1;
padding: 20px;
margin-left: 20px;
font-size: 15px;
color: #43597c;
}
.col2 {
background: #eceef1;
padding: 20px;
padding-left: 20px;
color: #43597c;
text-align: justify;
}
.col3 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
.col4 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
#keyframes slideIn {
0% {
transform: translateX(0);
opacity: 0.2;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.maindiv {
animation: 1s ease-out 0s 1 slideIn;
height: 1000px;
overflow: scroll;
padding: 10px;
}
ul,
li {
padding-top: 10px;
margin-bottom: 1px;
margin-top: -10px;
padding-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/9888b57086.js" crossorigin="anonymous"></script>
<div class="maindiv">
<div class="flex-grid">
<div class="fas fa-book col1" id="infrtransp"></div>
<div class="col2">
<b>Infrastructură de transport</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza firmele)
</div>
</div>
<ul style="list-style-type: none;">
<li style="display: none; padding-left: 20px;" id="infrtranspUL">
<div class="flex-grid">
<div class="fas fa-book col1"></div>
<div class="col2"><b>AndConsult</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza formularul)
</div>
</div>
</li>
<ul>
<li style="padding-left:80px; display:none; list-style-type: none;" id="infrtranspFORM">
<div class="flex-grid">
<div class="fas fa-file col1"></div>
<div class="col2">Formular - AndConsult
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza sau descarca formularul)
</div>
<a href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" target="_blank">
<div class="fas fa-eye col3"></div>
</a>
<a download href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" <div class="fas fa-download col4"></div>
</a>
</div>
</li>
</ul>
</ul>
</div>

First I congratulate you , despite you're not a developer , you did a great work
If I could understand you issue ,
First, in HTML code you have to move the id #infrtranspUL from the li to the child .fa-book div element,
then your condition of showing li child was wrong replace it ony
from
if ($("#infrtranspFORM").css("display", "none")) {
$("#infrtranspFORM").css("display", "none");
} else {
$("#infrtranspFORM").slideToggle(1000, "linear");
}
to
if (!($("#infrtranspFORM").css("display") === "none")) {
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
$("#infrtranspFORM").slideToggle(1000, "linear");
}
And now it should work :
See below snippet :
$(document).ready(function() {
$("#infrtransp").click(function() {
$("#infrtranspUL").parents("li").slideToggle(1000, "linear");
$("#infrtransp").toggleClass('fa-book fa-book-open');
if (!($("#infrtranspFORM").css("display") === "none")) {
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
$("#infrtranspFORM").slideToggle(1000, "linear");
}
});
$("#infrtranspUL").click(function() {
$("#infrtranspFORM").slideToggle(1000, "linear");
$("#infrtranspUL").toggleClass('fa-book fa-book-open');
});
});
.flex-grid {
display: flex;
align-items: center;
justify-content: center;
background-color: #eceef1;
border-radius: 10px;
font-size: 15px;
-webkit-box-shadow: 0px 0px 7px 1px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 7px 1px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 0px 0px 7px 1px #ccc;
}
.flex-grid .col2 {
flex: 1;
}
.flex-grid {
margin: 0 0 20px 0;
}
.col1 {
background: #eceef1;
padding: 20px;
margin-left: 20px;
font-size: 15px;
color: #43597c;
}
.col2 {
background: #eceef1;
padding: 20px;
padding-left: 20px;
color: #43597c;
text-align: justify;
}
.col3 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
.col4 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
#keyframes slideIn {
0% {
transform: translateX(0);
opacity: 0.2;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.maindiv {
animation: 1s ease-out 0s 1 slideIn;
height: 1000px;
overflow: scroll;
padding: 10px;
}
ul,
li {
padding-top: 10px;
margin-bottom: 1px;
margin-top: -10px;
padding-right: 5px;
}
#infrtransp:hover,
#infrtranspUL:hover {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/9888b57086.js" crossorigin="anonymous"></script>
<div class="maindiv">
<div class="flex-grid">
<div class="fas fa-book col1" id="infrtransp"></div>
<div class="col2">
<b>Infrastructură de transport</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza firmele)
</div>
</div>
<ul style="list-style-type: none;">
<li style="display: none; padding-left: 20px;">
<div class="flex-grid">
<div class="fas fa-book col1" id="infrtranspUL"></div>
<div class="col2"><b>AndConsult</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza formularul)
</div>
</div>
</li>
<ul>
<li style="padding-left:80px; display:none; list-style-type: none;" id="infrtranspFORM">
<div class="flex-grid">
<div class="fas fa-file col1"></div>
<div class="col2">Formular - AndConsult
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza sau descarca formularul)
</div>
<a href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" target="_blank">
<div class="fas fa-eye col3"></div>
</a>
<a download href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf">
<div class="fas fa-download col4"></div>
</a>
</div>
</li>
</ul>
</ul>
</div>

Not too sure of what you expect, but , font-awsome uses <i> tags, maybe you can stick to it to easily read the code & avoid confusion .
You toggle a class (for an icone) on an element that does not hold it at first : $("#infrtranspUL").toggleClass('fa-book fa-book-open'); , you can update the selector $("#infrtranspUL i.fa").toggleClass('fa-book fa-book-open');.
height + overflow does not seem necessary here .
possible result you are expecting:
$(document).ready(function() {
$("#infrtransp").click(function() {
$("#infrtranspUL").slideToggle(1000, "linear");
$("#infrtransp ").toggleClass('fa-book fa-book-open');
if ($("#infrtranspFORM").css("display", "none")) {
$("#infrtranspFORM").css("display", "none");
} else {
$("#infrtranspFORM").slideToggle(1000, "linear");
}
});
$("#infrtranspUL").click(function() {
$("#infrtranspFORM").slideToggle(1000, "linear");
$("#infrtranspUL i.fa").toggleClass('fa-book fa-book-open');
});
$("#infrtransp").mouseover(function() {
jQuery('#infrtransp').css('cursor', 'pointer');
});
$("#infrtranspUL").mouseover(function() {
jQuery('#infrtranspUL').css('cursor', 'pointer');
});
});
.flex-grid {
display: flex;
align-items: center;
justify-content: center;
background-color: #eceef1;
border-radius: 10px;
font-size: 15px;
-webkit-box-shadow: 0px 0px 7px 1px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 7px 1px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 0px 0px 7px 1px #ccc;
}
.flex-grid .col2 {
flex: 1;
}
.flex-grid {
margin: 0 0 20px 0;
}
.col1 {
background: #eceef1;
padding: 20px;
margin-left: 20px;
font-size: 15px;
color: #43597c;
}
.col2 {
background: #eceef1;
padding: 20px;
padding-left: 20px;
color: #43597c;
text-align: justify;
}
.col3 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
.col4 {
background: #eceef1;
padding: 20px;
font-size: 25px;
color: #0074db;
}
#keyframes slideIn {
0% {
transform: translateX(0);
opacity: 0.2;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.maindiv {
animation: 1s ease-out 0s 1 slideIn;
padding: 10px;
}
ul,
li {
padding-top: 10px;
margin-bottom: 1px;
margin-top: -10px;
padding-right: 5px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="maindiv">
<div class="flex-grid">
<div class="fa fa-book col1" id="infrtransp"></div>
<div class="col2">
<b>Infrastructură de transport</b>
<br>(Click pe <span class="fas fa-book"></span> pentru a vizualiza firmele)
</div>
</div>
<ul style="list-style-type: none;">
<li style="display: none; padding-left: 20px;" id="infrtranspUL">
<div class="flex-grid">
<i class="fa fa-book col1"></i>
<div class="col2"><b>AndConsult</b>
<br>(Click pe <i class="fas fa-book"></i> pentru a vizualiza formularul)
</div>
</div>
</li>
<ul>
<li style="padding-left:80px; display:none; list-style-type: none;" id="infrtranspFORM">
<div class="flex-grid">
<i class="fas fa-file col1"></i>
<div class="col2">Formular - AndConsult
<br>(Click pe <i class="fas fa-book"></i> pentru a vizualiza sau descarca formularul)
</div>
<a href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf" target="_blank">
<i class="fas fa-eye col3"></i>
</a>
<a download href="https://https://test.adrvest.ro/attach_files/Formular%20AndConsult.pdf">
<i class="fas fa-download col4"></i>
</a>
</div>
</li>
</ul>
</ul>
</div>

Music player skip forward/backward functionality JQuery

New project this time, I'm working on a music player widget and I've hit a wall. I'm looking to make it so that the player can cycle the active track with skip forward and backward buttons and I know that it's easier to do when you put your elements in a list, but I still have no idea. I haven't yet hooked this up to any sort of tracklist or api or anything like that, right now I want to get the visual functionalities working.
Here's the Codepen as well.
function currentlyPlaying(target) {
var current = target.parent();
$('.playingTitle').text(current.children('.title').text());
$('.playingAuthor').text(current.children('.author').text());
}
$(document).on('click', '.play', function(e){
$('.pause').attr('class', 'icon play');
$(e.target).attr('class', 'icon pause');
currentlyPlaying( $(e.target));
});
$(document).on('click', '.playing', function(e){
$('.playing').attr('class', 'playingPaused paused controls');
});
$(document).on('click', '.paused', function(e){
$('.paused').attr('class', 'playingPaused playing controls');
});
* {
font-family: arial;
}
.container {
margin: auto;
padding: 0;
width: 500px;
border: 2px solid black;
}
.header {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #e0e0e0;
border-bottom: 1px solid black;
overflow: hidden;
}
.logo {
float: left;
}
.header h1 {
font-size: 32px;
position: relative;
left: 8px;
}
.songList {
margin: auto;
padding: 0;
height: 200px;
width: 100%;
overflow-y: scroll;
}
.songList ul {
list-style: none;
padding: 0;
margin: 0;
}
.song {
height: 49px;
width: calc(100% - 10px);
padding: 5px;
border-bottom: 1px solid #bbbbbb;
background: #f1f1f1;
}
.song:hover {
background: #dddddd;
}
.icon {
float: left;
opacity: 0.2;
}
.icon:hover {
opacity: 0.7;
}
.play {
content:url(https://png.icons8.com/metro/1600/play.png);
}
.pause {
content:url(http://icons.veryicon.com/256/System/Windows%208/Media%20Controls%20Pause.png);
}
.title {
opacity: 0.8;
font-size: 20px;
position: relative;
top: 4px;
left: 4px;
}
.author {
opacity: 0.4;
font-size: 14px;
position: relative;
left: 8px;
}
.footer {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #888888;
border-top: 1px solid black;
overflow: hidden;
}
.controls{
float: left;
position: relative;
filter: invert(1.0);
opacity: 0.7;
}
.controls:hover {
filter: invert(0.15);
}
.skipBack {
top: 16px;
}
.skipForward {
top: 16px;
}
.playing {
content:url(https://png.icons8.com/windows/1600/circled-pause.png);
}
.paused {
content:url(https://png.icons8.com/material/1600/circled-play.png);
}
.playingTitle {
font-size: 24px;
color: white;
opacity: 0.7;
position: relative;
top: 16px;
left: 8px;
}
.playingAuthor {
font-size: 18px;
color: white;
opacity: 0.45;
position: relative;
top: 12px;
left: 12px;
}
<script
src="http://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<div class="container">
<div class="header">
<img class="logo" src="http://www.pvhc.net/img59/rpxzzzyofvqahyiwtziu.png" height="80px">
<h1>Virus Free* Music Player!!</h1>
</div>
<div class="songList">
<ul>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">God's Plan</span><br>
<span class="author">Drake</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Havana</span><br>
<span class="author">Camila Cabello & Young Thug</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">River</span><br>
<span class="author">Eminem & Ed Sheeran</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Perfect</span><br>
<span class="author">Ed Sheeran</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Echame La Culpa</span><br>
<span class="author">Luis Fonsi & Demi Lovato</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Rockstar</span><br>
<span class="author">Post Malone & 21 Savage</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Him & I</span><br>
<span class="author">G-Eazy & Halsey</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Finesse</span><br>
<span class="author">Bruno Mars & Cardi B</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Wolves</span><br>
<span class="author">Selena Gomez & Marshmello</span>
</div>
</li>
<li>
<div class="song">
<img class="icon play" height="48px">
<span class="title">Feel It Still</span><br>
<span class="author">Portugal. The Man</span>
</div>
</li>
</ul>
</div>
<div class="footer">
<img class="skipBack controls" src="https://png.icons8.com/metro/1600/skip-to-start.png" height="48px">
<img class="playingPaused paused controls" height="80px">
<img class="skipForward controls" src="https://png.icons8.com/metro/1600/end.png" height="48px">
<span class="playingTitle">Select a track to begin</span><br>
<span class="playingAuthor">Go ahead no one is stopping you.</span>
</div>
</div>

I have removed the div tags from the inside of you li tags as they did not serve any purpose except to complicate the HTML structure.
You could show a selected song in your play list and then wire up the previous and next buttons to do something.
Here is an example of how:
$(".song").on("click", function() {
$(".selected").removeClass("selected");
$(this).addClass("selected");;
})
$(".skipBack").on("click", function() {
var target = $(".song.selected").prev(".song");
$(".selected").removeClass("selected");
$(target).addClass("selected");
});
$(".skipForward").on("click", function() {
var target = $(".song.selected").next(".song");
$(".selected").removeClass("selected");
$(target).addClass("selected");
});
* {
font-family: arial;
}
.container {
margin: auto;
padding: 0;
width: 500px;
border: 2px solid black;
}
.header {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #e0e0e0;
border-bottom: 1px solid black;
overflow: hidden;
}
.logo {
float: left;
}
.header h1 {
font-size: 32px;
position: relative;
left: 8px;
}
.songList {
margin: auto;
padding: 0;
height: 200px;
width: 100%;
overflow-y: scroll;
}
.songList ul {
list-style: none;
padding: 0;
margin: 0;
}
.song {
height: 49px;
width: calc(100% - 10px);
padding: 5px;
border-bottom: 1px solid #bbbbbb;
background: #f1f1f1;
}
.song:hover {
background: #dddddd;
}
.song.selected {
background: #aaaaaa;
}
.icon {
float: left;
opacity: 0.2;
}
.icon:hover {
opacity: 0.7;
}
.play {
content: url(https://png.icons8.com/metro/1600/play.png);
}
.pause {
content: url(http://icons.veryicon.com/256/System/Windows%208/Media%20Controls%20Pause.png);
}
.title {
opacity: 0.8;
font-size: 20px;
position: relative;
top: 4px;
left: 4px;
}
.author {
opacity: 0.4;
font-size: 14px;
position: relative;
left: 8px;
}
.footer {
margin: auto;
padding: 0;
height: 80px;
width: 100%;
background: #888888;
border-top: 1px solid black;
overflow: hidden;
}
.controls {
float: left;
position: relative;
filter: invert(1.0);
opacity: 0.7;
}
.controls:hover {
filter: invert(0.15);
}
.skipBack {
top: 16px;
}
.skipForward {
top: 16px;
}
.playing {
content: url(https://png.icons8.com/windows/1600/circled-pause.png);
}
.paused {
content: url(https://png.icons8.com/material/1600/circled-play.png);
}
.playingTitle {
font-size: 24px;
color: white;
opacity: 0.7;
position: relative;
top: 16px;
left: 8px;
}
.playingAuthor {
font-size: 18px;
color: white;
opacity: 0.45;
position: relative;
top: 12px;
left: 12px;
}
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
</script>
<div class="container">
<div class="header">
<img class="logo" src="http://www.pvhc.net/img59/rpxzzzyofvqahyiwtziu.png" height="80px">
<h1>Virus Free* Music Player!!</h1>
</div>
<div class="songList">
<ul>
<li class="song">
<img class="icon play" height="48px">
<span class="title">God's Plan</span><br>
<span class="author">Drake</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Havana</span><br>
<span class="author">Camila Cabello & Young Thug</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">River</span><br>
<span class="author">Eminem & Ed Sheeran</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Perfect</span><br>
<span class="author">Ed Sheeran</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Echame La Culpa</span><br>
<span class="author">Luis Fonsi & Demi Lovato</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Rockstar</span><br>
<span class="author">Post Malone & 21 Savage</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Him & I</span><br>
<span class="author">G-Eazy & Halsey</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Finesse</span><br>
<span class="author">Bruno Mars & Cardi B</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Wolves</span><br>
<span class="author">Selena Gomez & Marshmello</span>
</li>
<li class="song">
<img class="icon play" height="48px">
<span class="title">Feel It Still</span><br>
<span class="author">Portugal. The Man</span>
</li>
</ul>
</div>
<div class="footer">
<img class="skipBack controls" src="https://png.icons8.com/metro/1600/skip-to-start.png" height="48px">
<img class="playingPaused paused controls" height="80px">
<img class="skipForward controls" src="https://png.icons8.com/metro/1600/end.png" height="48px">
<span class="playingTitle">Select a track to begin</span><br>
<span class="playingAuthor">Go ahead no one is stopping you.</span>
</div>
</div>

Change background colour of an active div

I have created a drop down menu.I wanna change the background color of active span tag, which contains the arrow image. And on click of any dropdown option, it should close and that option should come in the menu.
example:- if i click on option 'DROP ITEM 2' option , it should replace the 'ITEM NAME'.
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
$("#rotate_sign").css({
'background-color': 'green'
});
var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
e(".button-dropdown .dropdown_menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown_menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
* {
box-sizing: border-box;
}
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font-family: 'PT Sans Caption', sans-serif;
text-transform: uppercase;
margin: 0;
padding: 0;
padding: 5px 0px 0px 0px;
}
.nav li {
display: inline-block;
list-style: none;
width: 100%;
}
.nav .button-dropdown {
position: relative;
}
.nav .button-dropdown .dropdown-toggle {
display: block;
padding: 0px 0px 0px 20px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
}
.nav .button-dropdown .dropdown_items {
display: block;
padding: 10px 2px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
border-bottom: solid 0.5px #e4e4e4;
}
.border_bottom_none {
border-bottom: solid 1px #ffffff;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
height: 26.5px;
background-color: #f3f3f3;
}
.dropdown_menu {
z-index: 1000;
float: left;
/*min-width: 160px;*/
font-size: 14px;
list-style: none;
border-radius: 1px;
}
.nav li .dropdown_menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
background-color: #f3f3f3;
box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}
.nav li .dropdown_menu.active {
display: block;
}
.nav li .dropdown_menu a {
width: 90%;
margin: auto;
}
div.custom-table {
display: table;
width: 100%;
}
div.custom-table-row {
display: table-row
}
div.custom-table-cell {
display: table-cell;
padding: 3px;
}
.custom-table-row>.custom-table-cell {
height: 35px;
padding-bottom: 0px;
}
div.table-cell-data {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 0;
}
div.table-cell-data.right-align {
justify-content: flex-end;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
border-bottom: 1px solid #cccccc;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
width: 32px;
height: 32px;
margin: 0 5px;
margin-right: 10px;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
min-width: 5%;
white-space: nowrap;
border: none;
vertical-align: middle;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
width: 45%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
width: 25%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
width: 15%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
width: 10%;
}
.sign_rotate {
height: 20px;
width: 19px;
}
.sign_rotate img {
width: 100%;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
<div class="custom-table-row">
<div class="custom-table-cell">
<div class="table-cell-data">
<input type="checkbox" />
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
ITEM name <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data right-align">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
<a href="#" class="dropdown_items">
Drop Item 1
</a>
</li>
<li>
<a href="#" class="dropdown_items">
Drop Item 2
</a>
</li>
<li>
<a href="#" class="dropdown_items border_bottom_none">
Drop Item 3
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>

place the text "item name " in a span with an id named label1
and add the following
e(".dropdown_menu").click(function(event){
e("#label1").text(event.target.textContent.trim());
})
Snippet below
jQuery(document).ready(function(e) {
function t(t) {
e(t).bind("click", function(t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function() {
$("#rotate_sign").css({
'background-color': 'green'
});
var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
e(".button-dropdown .dropdown_menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown_menu").hide();
});
e(document).bind("click", function(t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown"))
e(".button-dropdown .dropdown-toggle").removeClass("active");
});
e(".dropdown_menu").click(function(event) {
e("#label1").text(event.target.textContent.trim());
console.log(this);
})
e(".table-cell-data").click(function(ev){
var that=this;
e(".table-cell-data").each(function(){
if(this.classList.contains("color_me") && this!=that){
this.classList.remove("color_me");
}
})
this.classList.add("color_me")
})
});
* {
box-sizing: border-box;
}
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font-family: 'PT Sans Caption', sans-serif;
text-transform: uppercase;
margin: 0;
padding: 0;
padding: 5px 0px 0px 0px;
}
.nav li {
display: inline-block;
list-style: none;
width: 100%;
}
.nav .button-dropdown {
position: relative;
}
.nav .button-dropdown .dropdown-toggle {
display: block;
padding: 0px 0px 0px 20px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
}
.nav .button-dropdown .dropdown_items {
display: block;
padding: 10px 2px;
text-decoration: none;
font-family: 'PT Sans Caption', sans-serif;
font-size: 7.5px;
font-weight: bold;
line-height: 2.33;
letter-spacing: 0px;
text-align: center;
color: #666667;
border-bottom: solid 0.5px #e4e4e4;
}
.border_bottom_none {
border-bottom: solid 1px #ffffff;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
height: 26.5px;
background-color: #f3f3f3;
}
.dropdown_menu {
z-index: 1000;
float: left;
/*min-width: 160px;*/
font-size: 14px;
list-style: none;
border-radius: 1px;
}
.nav li .dropdown_menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
background-color: #f3f3f3;
box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
}
.nav li .dropdown_menu.active {
display: block;
}
.nav li .dropdown_menu a {
width: 90%;
margin: auto;
}
div.custom-table {
display: table;
width: 100%;
}
div.custom-table-row {
display: table-row
}
div.custom-table-cell {
display: table-cell;
padding: 3px;
}
.custom-table-row>.custom-table-cell {
height: 35px;
padding-bottom: 0px;
}
div.table-cell-data {
position: relative;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 5px 0;
}
div.table-cell-data.right-align {
justify-content: flex-end;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell {
border-bottom: 1px solid #cccccc;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon {
width: 32px;
height: 32px;
margin: 0 5px;
margin-right: 10px;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child {
min-width: 5%;
white-space: nowrap;
border: none;
vertical-align: middle;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2) {
width: 45%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3) {
width: 25%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4) {
width: 15%;
}
div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5) {
width: 10%;
}
.sign_rotate {
height: 20px;
width: 19px;
}
.sign_rotate img {
width: 100%;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.color_me{
background:green;
color:white;
}
#rotate_sign{
background:transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-table brand-portal-panel">
<div class="custom-table-row">
<div class="custom-table-cell">
<div class="table-cell-data">
<input type="checkbox" />
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
<span id="label1"> ITEM name <span><span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="custom-table-cell">
<div class="table-cell-data right-align">
<ul class="nav">
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
</a>
<ul class="dropdown_menu">
<li>
Drop Item 1
</li>
<li>
Drop Item 2
</li>
<li>
Drop Item 3
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</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/