Develop Reference

Submenu levels do not work properly Vanilla JS

I am making a menu with pure Vanilla JS, because I want it to implement it in an Angular 8 project.
It is working good at some point, because it opens the hidden menu very good. The thing is that when I want to open a second level hidden menu , then it closes everything. For example if you click in 'Soluciones' link, then it opens the submenu very good. After that you must be able to click 'Correo y herramientas' in order to show a second level hidden menu, which is: Correo 1, Correo 2, Correo 3 links; but before showing this last links, it closes everything.
I have a codepen link to show this: https://codepen.io/Bungo808/pen/ZEBpmXG
Any advice would be helpfull!!
My HTML
<div class="red">
<nav id="nav" class="sub-menu open">
<ul class="list-unstyled">
<li id="subb">
<a class="link">Quiénes somos</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li>
<a class="link">Sobre eSource</a>
</li>
<li>
<a class="link">Amarello</a>
</li>
</ul>
</li>
<li id="subb">
<a class="link">Soluciones</a>
<img id="iplus" class="splus" src="../../assets/img/splus.svg" alt="">
<ul id="smenu" >
<li id="subb">
<a class="link">Correo y herramientas</a>
<ul>
<li><a class="link">Correo 1</a></li>
<li><a class="link">Correo 2</a></li>
<li><a class="link">Correo 3</a></li>
</ul>
</li>
<li id="subb">
<a class="link">Infrastructure as a Service</a>
<ul>
<li><a class="link">Infra 1</a></li>
<li><a class="link">Infra 2</a></li>
<li><a class="link">Infra 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<div class="overlay"></div>
</div>
My JS
let list_items = document.querySelectorAll('#subb');
// Show Submenu
for (let i = 0; i < list_items.length; i++) {
list_items[i].addEventListener("click", show);
}
function show() {
this.classList.toggle("myClass");
console.log('I clicked it!')
}
A part of my CSS, which is the responsible to open the hidden menu
.sub-menu {
padding: 0 0 0 2%;
left: 0px;
top: 0;
transition: all 0.3s ease;
height: 100%;
width: 280px;
position: fixed;
margin: 0;
background-color: #f9f9f9;
border-radius: 0;
z-index: 10;
overflow: hidden;
}
.sub-menu > ul {
width: 100%;
height: 100%;
margin-top: 60px;
}
.sub-menu li {
position: relative;
display: block;
list-style: none;
padding: 2px 0 2px 14px;
margin-left: 0;
cursor: pointer;
color: white;
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
&:first-child{
// border: 1px solid red;
}
}
.sub-menu li a {
color: #40465f;
font-size: 16px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul ul li a {
color: #40465f;
font-size: 14px;
font-weight: 300;
width: 100%;
display: block;
line-height: 22px;
padding: 6px 0;
&:hover{
color: #2487FC;
text-decoration: none;
}
}
.sub-menu ul ul{
display: none;
background: white;
}
#subb.myClass > ul{
display: block;
}
.sub-menu ul ul ul{
display: none;
border: 1px solid red;
}

The click event is propagating over and over again. So eventually the class gets toggled off. To prevent this add .stopPropagation(); to your show() function like this:
function show(e) {
e.stopPropagation();
this.classList.toggle("myClass");
console.log('I clicked it!')
}

How to add navigation bar on a image

First day of me learning to code in html and css.
I'm trying to add navigation bar on a image but i am unable to do so.
The background image i am trying to add is not displaying too.
Can anyone help me out here.
.header {
background-image: url("vent1.jpg");
}
.nav {
overflow: hidden;
float: left;
background-color: #333;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menu-bar {
list-style-type: none;
text-align: center;
}
.ul {
display: inline-block;
padding: 8px;
margin: 0px;
color: white;
}
<div class="header">
<div class="nav">
<div class="menu-bar">
<ul>
<li> Home</li>
<li>
About Us</li>
<li>
Portfolio</li>
<li>
Contact</li>
</ul>
</div>
</div>
</div>

header class should have these properties.
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("vent1.jpg");
background-repeat: no-repeat;
background-size:cover;
}

Bootstrap 3.0: How to make vertical navbar dropdown not append to only last list item?

So I have a panel layout that I've been throwing together and it has a fancy vertical navbar. I have it aligned correctly and everything and I have successfully been able to get a dropdown menu to appear in a vertical fashion, however, for some reason it is always appending to the last item on list. I can't understand why it is doing this.
I've posted all of my code below, and from previous research on the initial issue of just getting the menu to show up, I believe that my css is correct, so I'm wondering if it may be a javascript issue on the boostrap side, but I have no javascript currently being used with the side menu.
CSS
/************
* side navbar
*************/
#side-nav{
height: 100%;
padding-left: 0;
padding-right: 0;
}
.nav-stacked{
height: 100%;
width: 100%;
background: #3B3B3B;
overflow-x: visible;
overflow-y: hidden;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.nav-stacked > li > a > p{
font-size: 14px;
padding-left: 4px;
display: block;
text-align: center;
}
.nav-stacked > li > a > span{
font-size: 36px;
display: block;
text-align: center;
}
.nav-pills > li > a{
border-radius: 0;
padding-top: 15px;
}
.nav-pills > li.active > a{
background: linear-gradient(#343434, #000000);
}
.nav-pills > li:not(.active) > a{
background: linear-gradient(#4B4B4B, #3B3B3B);
color : #e5e5e5;
}
.nav-pills > li:last-child:not(.active) > a{
border-bottom: solid 1px #353535;
}
.nav-pills > li:not(.active) > a:hover{
background: linear-gradient(#ffffff, #CACCCB);
color : #333;
}
.nav-stacked > li+li{
margin-top: 0;
}
#side-nav li.active.open, #side-nav li:not(.active).open{
position: static;
}
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: -92px 0 0 100%;
border-radius: 0;
}
.dropdown-toggle .glyphicon-chevron-right{
font-size: 14px;
position: absolute;
top: 36px;
left: 85%;
}
html
<nav id='side-nav' class='hidden-xs col-sm-2 col-md-1'>
<ul class='nav nav-pills nav-stacked'>
<li>
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class='glyphicon glyphicon-user'></span>
<p>Driver</p>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<ul class='dropdown-menu'>
<li>EXPIRATIONS</li>
<li><a class='clinic' href="#">CLINICS</a></li>
<li><a class='drugTest' href="#">DRUG TESTING</a></li>
<li>RECRUITING</li>
</ul>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-list-alt'></span>
<p>Comcheck</p>
</a>
</li>
<li>
<a href="/equipment">
<span class='glyphicon glyphicon-wrench'></span>
<p>Equipment</p>
</a>
</li>
</ul>
</nav>
I have a working fiddle to demonstrate what my issue is:
https://jsfiddle.net/ye1q4wfu/4/
All I want it to do is, when I click on the list item that has a dropdown. I want the dropdown to appear next to it.

Just set the top of dropdown to top: auto;
#side-nav .dropdown-menu {
top: auto;
}
https://jsbin.com/fukujazuko/
My internet has some trouble with jsfiddle

If you don't mind using a bit of JQuery, I think this will do the trick:
$('.dropdown-menu').each(function() {
$(this).css('top', $(this).closest('li').css('top'));
});
You will also need to change one line of your CSS:
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
//margin: -92px 0 0 100%; /* Removed */
margin: 0 0 0 100%; /* Added */
border-radius: 0;
}
Demo Here

Use the following CSS code that the sub-menu appears in front of the item.
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: -290px 0 0 100%;
border-radius: 0;
}

I've added the clearfix class to the li element in which your dropdown menu is. Then, these attributes to dropdown-menu
#side-nav .dropdown-menu {
...
top: auto;
float: right;
}
And added this css rule:
#side-nav .dropdown-toggle {
float: left;
width: 100%;
}
This is the complete snippet with the changes. When showing the code snippet, please, click on "Full page" to see the result.
#side-nav{
height: 100%;
padding-left: 0;
padding-right: 0;
}
.nav-stacked{
height: 100%;
width: 100%;
background: #3B3B3B;
overflow-x: visible;
overflow-y: hidden;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.nav-stacked > li > a > p{
font-size: 14px;
padding-left: 4px;
display: block;
text-align: center;
}
.nav-stacked > li > a > span{
font-size: 36px;
display: block;
text-align: center;
}
.nav-pills > li > a{
border-radius: 0;
padding-top: 15px;
}
.nav-pills > li.active > a{
background: linear-gradient(#343434, #000000);
}
.nav-pills > li:not(.active) > a{
background: linear-gradient(#4B4B4B, #3B3B3B);
color : #e5e5e5;
}
.nav-pills > li:last-child:not(.active) > a{
border-bottom: solid 1px #353535;
}
.nav-pills > li:not(.active) > a:hover{
background: linear-gradient(#ffffff, #CACCCB);
color : #333;
}
.nav-stacked > li+li{
margin-top: 0;
}
#side-nav li.active.open, #side-nav li:not(.active).open{
position: static;
}
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: 0 0 0 100%;
border-radius: 0;
top: auto;
float: right;
}
#side-nav .dropdown-toggle {
float: left;
width: 100%;
}
.dropdown-toggle .glyphicon-chevron-right{
font-size: 14px;
position: absolute;
top: 36px;
left: 85%;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav id='side-nav' class='hidden-xs col-sm-2 col-md-1'>
<ul class='nav nav-pills nav-stacked'>
<li class="clearfix"> <!-- ADDED THE CLEARFIX CLASS -->
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class='glyphicon glyphicon-user'></span>
<p>Driver</p>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<ul class='dropdown-menu'>
<li>EXPIRATIONS</li>
<li><a class='clinic' href="#">CLINICS</a></li>
<li><a class='drugTest' href="#">DRUG TESTING</a></li>
<li>RECRUITING</li>
</ul>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-list-alt'></span>
<p>Comcheck</p>
</a>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-wrench'></span>
<p>Equipment</p>
</a>
</li>
</ul>
</nav>
</body>
</html>

JavaScript hover without using a mouse

I'm currently working on a website. I wanted to make it easier to people with disabilities to use. My boss is blind but he uses the program "JAWS" to navigate through things on his computer. What I'm trying to do is when he does on this website, he can press "tab" and the "hover menu" pops open.
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu {
width: 160%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
background: #2e2728;
}
.sub-menu li {
display: block;
font-size: 16px;
}
.sub-menu li a {
color: white;
}
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<nav class="menu">
<ul class="nav nav-pills" class="clearfix">
<li class="active"><a>Home</a>
</li>
<li>About<span class="arrow">▼</span>
<ul class="sub-menu">
<li><a align="left" href="#">About the Center</a>
</li>
<li>Membership
</li>
<li>History
</li>
<li>Mission
</li>
<li>Event Calendar
</li>
<li> News
</li>
</ul>
</li>
</ul>
</nav>
And this is what I tried to do.
if (window.addEventListener) {
var keys = "16";
window.addEventListener("keydown", function(e) {
keys.push(e.keyCode);
if (keys.toString() >= 0) {
document.getElementById("about").hover();
};
});
};

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/