Hide CSS menu on click

Hide CSS menu on click - javascript

Any idea how I can hide this dropdown when any item is clicked on? return it to its resting state? I want it to be hidden mainly for mobile users. It works fine as is right now, but on mobiles it stays open until another element of the page "happens" to be clicked on.
HTML
<div class="menubar">
<ul class="menu">
<li class="menu"><div onClick="loadPage('home.html');">HOME</div></li>
<li class="menu"><div onClick="">PRODUCTS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('products.html');">View All Products</div></li>
<li class="menu"><div onClick="loadPage('cargolite.html');">Car-Go Lite</div></li>
<li class="menu"><div onClick="loadPage('cargolitextreme.html');">Car-Go Lite Xtreme</div></li>
<li class="menu"><div onClick="loadPage('pup.html');">P'Up</div></li>
<li class="menu"><div onClick="loadPage('twist.html');">Twist</div></li>
<li class="menu"><div onClick="loadPage('wazat.html');">Wazat</div></li>
</ul>
</li>
<li class="menu"><div onClick="">DOWNLOADS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('brochures.html');">Brochures</div></li>
<li class="menu"><div onClick="loadPage('manuals.html');">Manuals</div></li>
</ul>
</li>
<li class="menu"><div onClick="">DEALERS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('dealers_us.html');">United States</div></li>
<li class="menu"><div onClick="loadPage('dealers_ww.html');">Worldwide</div></li>
</ul>
</li>
<li class="menu"><div onClick="loadPage('about.html');">ABOUT</div></li>
<li class="menu"><div onClick="loadPage('contact.html');">CONTACT US</div></li>
</ul>
</div>
CSS
ul.menu {z-index: 1000; text-align: center; margin: 0; padding: 0px; list-style: none; display: inline; color: #FFFFFF;}
ul.menu li.menu {z-index: 1000; color: #FFFFFF; line-height: 40px; padding-left: 15px; padding-right: 15px; font-family: Arial,
Helvetica, sans-serif; font-weight: bold; position: relative; background: #000000; cursor: pointer; display: inline-block;}
ul.menu li.menu:hover{z-index: 1000; background: #505050; color: #FFFFFF;}
ul.menu li.menu ul.menu{z-index: 1000; color: #FFFFFF; left: 0; padding:0; position: absolute; width: 160px; visibility: hidden;
display: none; border: 1px #000000 solid; border-bottom: none;}
ul.menu li.menu ul.menu li.menu{z-index: 1000; font-size: 12pt; padding: 4px; text-align: left; background: #F97300; display:
block; color: #FFFFFF; border-bottom: 1px #000000 solid; line-height: 30px;}
ul.menu li.menu ul.menu li.menu:hover{z-index: 1000; background: #E0E0E0; color: #000000;}
ul.menu li.menu:hover ul.menu{z-index: 1000; display: block; visibility: visible; opacity: .8;}
jsfiddle http://jsfiddle.net/omvvL5z5/1/

Use the JQuery $(".menubar").toggle() function inside a function you call when you click on a item.
http://api.jquery.com/toggle/
This is the code I tried on jsfiddle: Try three
<div class="menubar">
<ul class="menu">
<li class="menu"><div onClick="loadPage('home.html');">HOME</div></li>
<li class="menu"><div onClick="" class = "button">PRODUCTS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('products.html');">View All Products</div></li>
<li class="menu"><div onClick="loadPage('cargolite.html');">Car-Go Lite</div></li>
<li class="menu"><div onClick="loadPage('cargolitextreme.html');">Car-Go Lite Xtreme</div></li>
<li class="menu"><div onClick="loadPage('pup.html');">P'Up</div></li>
<li class="menu"><div onClick="loadPage('twist.html');">Twist</div></li>
<li class="menu"><div onClick="loadPage('wazat.html');">Wazat</div></li>
</ul>
</li>
<li class="menu"><div onClick="" class = "button">DOWNLOADS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('brochures.html');">Brochures</div></li>
<li class="menu"><div onClick="loadPage('manuals.html');">Manuals</div></li>
</ul>
</li>
<li class="menu"><div onClick="" class = "button">DEALERS <img src="images/darrow.gif" border=0></div>
<ul class="menu">
<li class="menu"><div onClick="loadPage('dealers_us.html');">United States</div></li>
<li class="menu"><div onClick="loadPage('dealers_ww.html');">Worldwide</div></li>
</ul>
</li>
<li class="menu"><div onClick="loadPage('about.html');" class = "button">ABOUT</div></li>
<li class="menu"><div onClick="loadPage('contact.html');" class = "button">CONTACT US</div></li>
</ul>
</div>
Then just put in your other jquery
instead of what I did try
$('.menu > ul > li').click(function() {
$('.menu > ul.menu').toggle();
});
$('.button').hover(function(){$('.menu > ul.menu').show();});
You may also use something like bootstrap: http://getbootstrap.com/components/#navbar

Please give this CSS for mobile css
.menubar{
display:none;
}

Related

HTML collapse/expand tree not working as expected

I want to collapse category tree with multi hierarchy. I tried so many answers from stack, but it's not working. Can anyone please help me?
I tried this code : https://stackoverflow.com/a/30945775/7727479
Actual Result :
First display Test 1 and Test 3
Then, click on Test 1 => On click Test 2 and Test 8 should be display
Then, click on Test 2 => On click Test 4 and Test 7 should be display
and so on.
UPDATE :
Snippet :
$(document).ready(function() {
var getChild = $('ul.categories').children('li');
getChild.each(function(i, v) {
if ($(v).data('parentcategory') == "0") {
$(v).addClass('active-collapse');
}
});
$('div.categories-list li').click(function() {
var main_category = $(this).data('parentcategory');
$('ul.sub', $(this).parent()).eq(0).toggle();
});
});
div.categories-list {
width: 30%;
margin-bottom: 20px;
float: left;
}
ul.categories,
ul.sub {
border-top: 1px solid #c3cfd9;
margin: 0;
padding: 0;
}
ul.categories li {
margin: 0;
padding: 0;
list-style: none;
}
ul.categories li a {
display: block;
max-width: 100%;
padding: 10px 5px 10px 10px;
font-size: 13px;
background: #FCFCFC;
color: #3f729b;
border: 1px solid #c3cfd9;
border-top: 0px !important;
text-decoration: none;
font-weight: 700;
cursor: pointer;
transition: all 150ms ease-out;
-webkit-transition: all 150ms ease-out;
}
ul.categories li a:hover {
text-indent: 5px;
}
ul.sub {
display: none;
}
.activeUi {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="categories-list">
<ul class="categories">
<li class="child active-collapse" data-parentcategory="0" data-id="1">
<a class="li-child-text" style="padding-left:1%">Test 1</a>
<ul class="sub" data-parentcategory="0" data-id="1">
<li class="child deactive-collapse" data-parentcategory="1" data-id="2">
<a class="li-child-text" style="padding-left:5%">Test 2</a>
<ul class="sub" data-parentcategory="1" data-id="2">
<li class="child deactive-collapse" data-parentcategory="2" data-id="4"><a class="li-child-text" style="padding-left:10%">Test 4</a></li>
<li class="single deactive-collapse" data-parentcategory="4" data-id="5"><a class="li-single-text" style="padding-left:20%">Test 5</a></li>
<li class="single deactive-collapse" data-parentcategory="4" data-id="6"><a class="li-single-text" style="padding-left:20%">Test 6</a></li>
</ul>
</li>
<li class="single deactive-collapse" data-parentcategory="2" data-id="7"><a class="li-single-text" style="padding-left:10%">Test 7</a></li>
</ul>
<ul class="sub" data-parentcategory="0" data-id="1">
<li class="child deactive-collapse" data-parentcategory="1" data-id="8"><a class="li-child-text" style="padding-left:5%">Test 8</a></li>
<li class="single deactive-collapse" data-parentcategory="8" data-id="9"><a class="li-single-text" style="padding-left:40%">Test 9</a></li>
</ul>
</li>
<li class="single active-collapse" data-parentcategory="0" data-id="3"><a class="li-single-text" style="padding-left:1%">Test 3</a></li>
</ul>
</div>

I think the main problem was in you html structure, if you want to create a level, you need to create li in that level with anchor in the li element.
For example to add TEST 2.2 in TEST 1.0 you need to find next ul.sub after the anchor that is for TEST 1.0 and add another li with anchor , and if you want to create another submenu in TEST2.2 you need to create ul with class sub and and another li
<li class="single deactive-collapse">
<a class="li-single-text" style="padding-left:5%">Test 2.2 LAST</a>
<ul class="sub" >
<li class="child deactive-collapse">
<a class="li-child-text" style="padding-left:10%">Test 3.2 LAST</a>
</li>
</ul>
</li>
And here is the snippet
var addById = function (parent, id, name) {
$('div.categories-list li').each(function (i, e) {
if (parent === $(e).data("id")) {
if (!$(e).find("ul.sub").length) {
$(e).append('<ul class="sub"></ul>');
}
element = '<li class="child deactive-collapse" data-parentcategory="' + parent + '" data-id="' + id + '"><a class="li-child-text" style="padding-left:5%">' + name + '</a></li>';
$(e).find("ul.sub").append($(element));
return true;
}
});
};
addById(1, 123, 'dynamically');
addById(15, 124, 'dynamically');
$(document).ready(function () {
$('div.categories-list li > a').click(function () {
var main_category = $(this).data('parentcategory');
$('ul.sub', $(this).parent()).eq(0).toggle();
return false;
});
});
div.categories-list {
width: 30%;
margin-bottom: 20px;
float: left;
}
ul.categories,
ul.sub {
border-top: 1px solid #c3cfd9;
margin: 0;
padding: 0;
}
ul.categories li {
margin: 0;
padding: 0;
list-style: none;
}
ul.categories li a {
display: block;
max-width: 100%;
padding: 10px 5px 10px 10px;
font-size: 13px;
background: #FCFCFC;
color: #3f729b;
border: 1px solid #c3cfd9;
border-top: 0px !important;
text-decoration: none;
font-weight: 700;
cursor: pointer;
transition: all 150ms ease-out;
-webkit-transition: all 150ms ease-out;
}
ul.categories li a:hover {
text-indent: 5px;
}
ul.sub {
display: none;
}
.activeUi {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="categories-list">
<ul class="categories">
<li class="child active-collapse" data-parentcategory="0" data-id="1">
<a class="li-child-text" style="padding-left:1%">Test 1.0</a>
<ul class="sub">
<li class="child deactive-collapse" data-parentcategory="1" data-id="2">
<a class="li-child-text" style="padding-left:5%">Test 2.0</a>
<ul class="sub">
<li class="child deactive-collapse" data-parentcategory="2" data-id="4">
<a class="li-child-text" style="padding-left:10%">Test 3.0 LAST</a>
</li>
<li class="single deactive-collapse" data-parentcategory="2" data-id="5">
<a class="li-single-text" style="padding-left:10%">Test 3.0 LAST</a>
</li>
<li class="single deactive-collapse" data-parentcategory="2" data-id="6">
<a class="li-single-text" style="padding-left:10%">Test 3.0 LAST</a>
</li>
</ul>
</li>
<li class="single deactive-collapse" data-parentcategory="1" data-id="7">
<a class="li-single-text" style="padding-left:5%">Test 2.1 LAST</a>
</li>
<li class="child deactive-collapse" data-parentcategory="1" data-id="8">
<a class="li-child-text" style="padding-left:5%">Test 8</a>
<ul class="sub" data-parentcategory="8" data-id="9">
<li class="single deactive-collapse" data-parentcategory="8" data-id="9">
<a class="li-single-text" style="padding-left:40%">Test 9</a>
</li>
</ul>
</li>
<li class="single deactive-collapse" data-parentcategory="1" data-id="10">
<a class="li-single-text" style="padding-left:5%">Test 2.2 LAST</a>
<ul class="sub">
<li class="child deactive-collapse" data-parentcategory="10" data-id="11">
<a class="li-child-text" style="padding-left:10%">Test 3.2 LAST</a>
</li>
</ul>
</li>
<!-- PUT EXAMPLE CODE HERE -->
</ul>
</li>
<li class="child active-collapse" data-parentcategory="0" data-id="12">
<a class="li-child-text" style="padding-left:1%">Test 1.1</a>
<ul class="sub">
<li class="child deactive-collapse" data-parentcategory="12" data-id="13"><a class="li-child-text" style="padding-left:5%">Test 2.1 LAST</a></li>
<li class="single deactive-collapse" data-parentcategory="12" data-id="14"><a class="li-single-text" style="padding-left:5%">Test 2.1 LAST</a></li>
</ul>
</li>
<li class="single active-collapse" data-parentcategory="0" data-id="15"><a class="li-single-text" style="padding-left:1%">Test 1.2 LAST</a></li>
</ul>
</div>

Yes, you have some issues with the structure of ul li. Please have a look at my demo. You can add your classes and attributes to your will. It won't hamper.
document.querySelector('.categories').addEventListener('click', (e) => {
const el = e.target;
const sibling = el.nextSibling.nextSibling;
if (el && el.className == 'toggle' && sibling) {
sibling.classList.toggle('show');
}
});
div.categories-list {
width: 50%;
margin-bottom: 20px;
float: left;
}
ul.categories,
ul.sub {
border-top: 1px solid #c3cfd9;
margin: 0;
padding: 0;
}
ul.categories li {
margin: 0;
padding: 0;
list-style: none;
}
ul.categories li a {
display: block;
max-width: 100%;
padding: 10px 5px 10px 10px;
font-size: 13px;
background: #FCFCFC;
color: #3f729b;
border: 1px solid #c3cfd9;
border-top: 0px !important;
text-decoration: none;
font-weight: 700;
cursor: pointer;
transition: all 150ms ease-out;
-webkit-transition: all 150ms ease-out;
}
ul.categories li a:hover {
text-indent: 5px;
}
ul.sub {
display: none;
}
.activeUi {
display: block;
}
ul ul {
display: none;
}
.show {
display: block;
}
<div class="categories-list">
<ul class="categories">
<li >
Test 1
<ul>
<li>
Test 2
<ul>
<li>
Test 4
<ul>
<li>
Test 5
</li>
<li>
Test 6
</li>
</ul>
</li>
<li>
Test 7
</li>
</ul>
</li>
<li>
Test 8
<ul>
<li>
Test 9
</li>
</ul>
</li>
</ul>
</li>
<li>
Test 3
</li>
</ul>
</div>

drop-down menu that lists columns

I'm trying to create a football website and I need someone to help me . I want to add a drop-down menu that lists columns of football competitions .Exactly in "competitions " just like this drop-down menu that lists columns.
#Mostafa Baezid Here is the code:
<!-- outer-wrapper start -->
<body>
<nav class='navbar navbar-default'>
<div class='navbar-header'>
<button class='navbar-toggle' data-target='.js-navbar-collapse' data-toggle='collapse' type='button'>
<span class='sr-only'>Toggle navigation</span>
<span class='icon-bar'/>
<span class='icon-bar'/>
<span class='icon-bar'/>
</button>
<a class='navbar-brand' href='#'>LOGO</a>
</div>
<div class='collapse navbar-collapse js-navbar-collapse'>
<ul class='nav navbar-nav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>News</a></li>
<li><a href='#'>EUROPE</a></li>
<li><a href='#'>AFRICA</a></li>
<li><a href='#'>WORLDWIDE</a></li>
<li class='dropdown mega-dropdown'>
<a class='dropdown-toggle arrow' data-toggle='dropdown' href='#'>Competitions <span class='glyphicon glyphicon-chevron-down '/></a>
<ul class='dropdown-menu mega-dropdown-menu'><!--megaMenu Wih 3 column start-->
<li class='col-sm-4 nopadding'>
<ul>
<li class='dropdown-header'>France</li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li class='divider'/>
</ul>
</li>
<li class='col-sm-4 nopadding'>
<ul>
<li class='dropdown-header'>Europe</li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li class='divider'/>
</ul>
</li>
<li class='col-sm-4 nopadding'>
<ul>
<li class='dropdown-header'>INTERNATIONAL</li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li><a href='#'>Demo Link</a></li>
<li class='divider'/>
</ul>
</li>
</ul><!--megaMenu Wih 3 column End-->
</li>
<li><a href='#'>Live Matches</a></li>
<li><a href='#'>Mercato</a></li>
<li><a href='#'>Videos</a></li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav>
<h1 class='c-text'> Mega Menu Demo </h1>
<script type='text/javascript'>$(function () { $('.arrow').click(function () { $('.glyphicon-chevron-down').toggle(); }); }); </script>
</body>
<div id='searchformfix'>
<form action='/search' id='searchform'>
<input name='q' onblur='if (this.value == "") {this.value = "Text to Search...";}' onfocus='if (this.value == "Text to Search...") {this.value = "";}' type='text' value='Text to Search...'/>
</form>
</div>
<div class='clear'/>
<!-- secondary navigation menu end -->
<!-- content wrapper start -->

You can easily do this in bootstrap framework. Demo. This is just an example. You can follow this. If you Have Any question ask me in comment. I will explain for you. Good Luck.
[N.B: Don't use !important on css if you have custom css file for your project. I use !important here because overwrite the css in same page.]
/* CSS used here will be applied after bootstrap.css */
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', 'sans-serif';
background: #f0f0f0;
background: white;
}
nav.navbar-default{
background: #35c353;
}
.navbar-nav>li>.dropdown-menu {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.navbar-default .navbar-nav>li>a {
color:white !important;
font-weight: bold;
}
.navbar-default .navbar-nav>li>a:hover{
color:black !important;
}
.mega-dropdown {
position: static !important;
}
.mega-dropdown-menu {
padding: 20px 0px;
width: 100%;
box-shadow: none;
-webkit-box-shadow: none;
border-color:#35c353;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
color: black !important;
background-color:#35c353 !important;
}
.mega-dropdown-menu:before {
content: "";
border-bottom: 15px solid #20ff4f;
border-right: 17px solid transparent;
border-left: 17px solid transparent;
position: absolute;
top: -15px;
left: 550px;
z-index: 10;
}
.mega-dropdown-menu:after {
content: "";
border-bottom: 17px solid #20ff4f;
border-right: 19px solid transparent;
border-left: 19px solid transparent;
position: absolute;
top: -17px;
left: 548px;
z-index: 8;
}
.mega-dropdown-menu > li > ul {
padding: 0;
margin: 0;
}
.mega-dropdown-menu > li > ul > li {
list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #999;
white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
text-decoration: none;
color: #444;
background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
color: #428bca;
font-size: 18px;
font-weight: bold;
background:#777;
}
h1.c-text{
text-align:center;}
/*Usefull class*/
.nopadding {
padding-left:0 !important;
padding-right:0 !important;
}
.nomargin{
margin-left:0;
margin-right:0;
}
#media (max-width:947px) and (min-width:769px) {
.navbar-nav {
display: inline-flex;
margin: 0;
}
.mega-dropdown-menu:before {
left: 495px !important;
}
.mega-dropdown-menu:after {
left: 495px !important;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- All links cdn's Before Body tag end -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
<head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LOGO</a>
</div>
<div class="collapse navbar-collapse js-navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>News</li>
<li>EUROPE</li>
<li>AFRICA</li>
<li>WORLDWIDE</li>
<li class="dropdown mega-dropdown">
Competitions <span class="glyphicon glyphicon-chevron-down "></span>
<ul class="dropdown-menu mega-dropdown-menu"><!--megaMenu Wih 3 column start-->
<li class="col-sm-4 nopadding">
<ul>
<li class="dropdown-header">France</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li class="divider"></li>
</ul>
</li>
<li class="col-sm-4 nopadding">
<ul>
<li class="dropdown-header">Europe</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li class="divider"></li>
</ul>
</li>
<li class="col-sm-4 nopadding">
<ul>
<li class="dropdown-header">INTERNATIONAL</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li>Demo Link</li>
<li class="divider"></li>
</ul>
</li>
</ul><!--megaMenu Wih 3 column End-->
</li>
<li>Live Matches</li>
<li>Mercato</li>
<li>Videos</li>
</ul>
</div>
<!-- /.nav-collapse -->
</nav><!-- /.nav-End -->
<h1 class="c-text"> Mega Menu Demo </h1>
<!-- All Scripts Before Body tag end -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
$('.arrow').click(function () {
$('.glyphicon-chevron-down').toggle();
});
});
</script>
</body>
Add this query this will display the navbar after click on the burger menu on mobile view(media screen 768)
#media only screen and (max-width:768px)
{
.navbar-nav{
display: block !important;
z-index: 1000;
position: absolute !important;
width: 100% ;
border: green !important;
background: #35c353 !important;}
}

How do I make my div's lined up?

I want my div's to line up on the top, but not line up at the bottom. This allows for flexibility of content:
/* font */
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap
{
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a
{
display:block;
text-decoration:none;
font-size:15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:7.5px 9px;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/* end of info nav */
/* course div */
#course_div {
width: 1200px;
position: relative;
left: 180px;
top: 30px;
padding: 10px;
}
#course_img {
width: 216px;
height: 121.5px;
border: 1px solid #ccc;
border-bottom: none;
}
#course_info {
border: 1px solid #ccc;
width: 205.5px;
padding: 5px;
position: relative;
top: -4px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
a .course_main {
text-decoration: none;
color: black;
width: 204px;
}
.course_main {
width: 216px;
display: inline-block;
margin-right: 30px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
/* end of course div */
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel='stylesheet' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li>Development
<ul>
<li>Web Development</li>
<li>Mobile Apps</li>
<li>Programming Languages</li>
<li>Game Development</li>
<li>Databases</li>
<li>Software Testing</li>
<li>Software Engineering</li>
<li>Development Tools</li>
<li>E-Commerce</li>
</ul>
</li>
<li>Business
<ul>
<li>Finance</li>
<li>Entrepreneurship</li>
<li>Communications</li>
<li>Management</li>
<li>Sales</li>
<li>Strategy</li>
<li>Operations</li>
<li>Project Management</li>
<li>Business Law</li>
<li>Data and Anylytics</li>
<li>Home Business</li>
<li>Human Resources</li>
<li>Industry</li>
<li>Media</li>
<li>Real Estate</li>
<li>Other</li>
</ul>
</li>
<li>IT & Software
<ul>
<li class="dir">IT Certification</li>
<li class="dir">Network & Security
<li>Hardware</li>
<li>Operating Systems</li>
<li>Other</li>
</ul>
<li>Office Productivity
<ul>
<li class="dir">Microsoft</li>
<li class="dir">Apple
<li>Google</li>
<li>SAP</li>
<li>Intuit</li>
<li>Salesforce</li>
<li>Oracle</li>
<li>Other</li>
</ul>
<li>Personal Development
<ul>
<li class="dir">Personal Transformation</li>
<li class="dir">Productivity
<li>Leadership</li>
<li>Personal Finance</li>
<li>Career Development</li>
<li>Parenting & Relationships</li>
<li>Happiness</li>
<li>Religion & Spirituality</li>
<li>Personal Brand Building</li>
<li>Creativity</li>
<li>Influence</li>
<li>Self Esteem</li>
<li>Stress Management</li>
<li>Memory and Study Skills</li>
<li>Motivation</li>
<li>Other</li>
</ul>
<li>Design
<ul>
<li class="dir">Web Design</li>
<li class="dir">Graphic Design
<li>Design Tools</li>
<li>User Experience</li>
<li>Game Design</li>
<li>Design Thinking</li>
<li>3D & Animation</li>
<li>Fashion</li>
<li>Architectural Design</li>
<li>Interior Design</li>
<li>Other</li>
</ul>
<li>Marketing
<ul>
<li class="dir">Digital Marketing</li>
<li class="dir">Search Engine Optimization
<li>Social Media Marketing</li>
<li>Branding</li>
<li>Marketing Fundamentals</li>
<li>Analystics & Automation</li>
<li>Public Relations</li>
<li>Advertising</li>
<li>Video & Mobile Marketing</li>
<li>Content Marketing</li>
<li>Non-Digital Marketing</li>
<li>Growth Hacking</li>
<li>Affiliate Marketing</li>
<li>Product Marketing</li>
<li>Other</li>
</ul>
<li>Lifestyle
<ul>
<li class="dir">Life Hacks</li>
<li class="dir">Arts & Crafts</li>
<li class="dir">Food & Beverage
<li>Beauty & Makeup</li>
<li>Travel</li>
<li>Gaming</li>
<li>Home Improvement</li>
<li>Pet Care & Training</li>
</ul>
<li>Photography
<ul>
<li class="dir">Digital Photography</li>
<li class="dir">Photography Fundamentals</li>
<li class="dir">Portraits
<li>Landscape</li>
<li>Black & White</li>
<li>Photography Tools</li>
<li>Mobile Photography</li>
<li>Travel Photography</li>
<li>Commercial Photography</li>
<li>Wedding Photography</li>
<li>Video Design</li>
<li>Other</li>
</ul>
<li>Health & Fitness
<ul>
<li class="dir">Fitness</li>
<li class="dir">General Health</li>
<li class="dir">Sports
<li>Nutrition</li>
<li>Yoga</li>
<li>Mental Health</li>
<li>Dieting</li>
<li>Self Defense</li>
<li>Safety & First Aid</li>
<li>Dance</li>
<li>Meditation</li>
<li>Other</li>
</ul>
<li>Language
<ul>
<li class="dir">English</li>
<li class="dir">Spanish</li>
<li class="dir">German
<li>French</li>
<li>Japanese</li>
<li>Portuguese</li>
<li>Chinese</li>
<li>Russian</li>
<li>Latin</li>
<li>Arabic</li>
<li>Hebrew</li>
<li>Italian</li>
<li>Other</li>
</ul>
<li>Music
<ul>
<li class="dir">Instruments</li>
<li class="dir">Production</li>
<li class="dir">Music Fundamentals
<li>Vocal</li>
<li>Music Techniques</li>
<li>Music Software</li>
<li>Other</li>
</ul>
<li>Academics
<ul>
<li class="dir">Social Science</li>
<li class="dir">Math & Science</li>
<li class="dir">Humanities
</ul>
</ul>
</nav>
<!-- end of info nav -->
<div id='course_div'>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Excel Excel Excel Excel Excel Excel
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
</div>
</body>
</html>
In the above example, I have two divs, but they are not lined up. How do I line up the divs on the top? I've tried the flex property, but nothing is working...

display flex, does the job.
See the code below with your updated display propery.
/* font */
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
font-size: 15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
/* end of info nav */
/* course div */
#course_div {
width: 1200px;
position: relative;
left: 180px;
top: 30px;
padding: 10px;
display: flex; /* ADD YOUR FLEX DISPLAY PROPERTY HERE */
flex-flow: wrap;
}
#course_img {
width: 216px;
height: 121.5px;
border: 1px solid #ccc;
border-bottom: none;
}
#course_info {
border: 1px solid #ccc;
width: 205.5px;
padding: 5px;
position: relative;
top: -4px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
a .course_main {
text-decoration: none;
color: black;
width: 204px;
}
.course_main {
width: 216px;
display: inline-block;
margin-right: 30px;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
}
/* end of course div */
<!DOCTYPE html>
<html>
<head>
<title>Hacked Genius</title>
<link rel='stylesheet' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li>Development
<ul>
<li>Web Development
</li>
<li>Mobile Apps
</li>
<li>Programming Languages
</li>
<li>Game Development
</li>
<li>Databases
</li>
<li>Software Testing
</li>
<li>Software Engineering
</li>
<li>Development Tools
</li>
<li>E-Commerce
</li>
</ul>
</li>
<li>Business
<ul>
<li>Finance
</li>
<li>Entrepreneurship
</li>
<li>Communications
</li>
<li>Management
</li>
<li>Sales
</li>
<li>Strategy
</li>
<li>Operations
</li>
<li>Project Management
</li>
<li>Business Law
</li>
<li>Data and Anylytics
</li>
<li>Home Business
</li>
<li>Human Resources
</li>
<li>Industry
</li>
<li>Media
</li>
<li>Real Estate
</li>
<li>Other
</li>
</ul>
</li>
<li>IT & Software
<ul>
<li class="dir">IT Certification
</li>
<li class="dir">Network & Security
<li>Hardware
</li>
<li>Operating Systems
</li>
<li>Other
</li>
</ul>
<li>Office Productivity
<ul>
<li class="dir">Microsoft
</li>
<li class="dir">Apple
<li>Google
</li>
<li>SAP
</li>
<li>Intuit
</li>
<li>Salesforce
</li>
<li>Oracle
</li>
<li>Other
</li>
</ul>
<li>Personal Development
<ul>
<li class="dir">Personal Transformation
</li>
<li class="dir">Productivity
<li>Leadership
</li>
<li>Personal Finance
</li>
<li>Career Development
</li>
<li>Parenting & Relationships
</li>
<li>Happiness
</li>
<li>Religion & Spirituality
</li>
<li>Personal Brand Building
</li>
<li>Creativity
</li>
<li>Influence
</li>
<li>Self Esteem
</li>
<li>Stress Management
</li>
<li>Memory and Study Skills
</li>
<li>Motivation
</li>
<li>Other
</li>
</ul>
<li>Design
<ul>
<li class="dir">Web Design
</li>
<li class="dir">Graphic Design
<li>Design Tools
</li>
<li>User Experience
</li>
<li>Game Design
</li>
<li>Design Thinking
</li>
<li>3D & Animation
</li>
<li>Fashion
</li>
<li>Architectural Design
</li>
<li>Interior Design
</li>
<li>Other
</li>
</ul>
<li>Marketing
<ul>
<li class="dir">Digital Marketing
</li>
<li class="dir">Search Engine Optimization
<li>Social Media Marketing
</li>
<li>Branding
</li>
<li>Marketing Fundamentals
</li>
<li>Analystics & Automation
</li>
<li>Public Relations
</li>
<li>Advertising
</li>
<li>Video & Mobile Marketing
</li>
<li>Content Marketing
</li>
<li>Non-Digital Marketing
</li>
<li>Growth Hacking
</li>
<li>Affiliate Marketing
</li>
<li>Product Marketing
</li>
<li>Other
</li>
</ul>
<li>Lifestyle
<ul>
<li class="dir">Life Hacks
</li>
<li class="dir">Arts & Crafts
</li>
<li class="dir">Food & Beverage
<li>Beauty & Makeup
</li>
<li>Travel
</li>
<li>Gaming
</li>
<li>Home Improvement
</li>
<li>Pet Care & Training
</li>
</ul>
<li>Photography
<ul>
<li class="dir">Digital Photography
</li>
<li class="dir">Photography Fundamentals
</li>
<li class="dir">Portraits
<li>Landscape
</li>
<li>Black & White
</li>
<li>Photography Tools
</li>
<li>Mobile Photography
</li>
<li>Travel Photography
</li>
<li>Commercial Photography
</li>
<li>Wedding Photography
</li>
<li>Video Design
</li>
<li>Other
</li>
</ul>
<li>Health & Fitness
<ul>
<li class="dir">Fitness
</li>
<li class="dir">General Health
</li>
<li class="dir">Sports
<li>Nutrition
</li>
<li>Yoga
</li>
<li>Mental Health
</li>
<li>Dieting
</li>
<li>Self Defense
</li>
<li>Safety & First Aid
</li>
<li>Dance
</li>
<li>Meditation
</li>
<li>Other
</li>
</ul>
<li>Language
<ul>
<li class="dir">English
</li>
<li class="dir">Spanish
</li>
<li class="dir">German
<li>French
</li>
<li>Japanese
</li>
<li>Portuguese
</li>
<li>Chinese
</li>
<li>Russian
</li>
<li>Latin
</li>
<li>Arabic
</li>
<li>Hebrew
</li>
<li>Italian
</li>
<li>Other
</li>
</ul>
<li>Music
<ul>
<li class="dir">Instruments
</li>
<li class="dir">Production
</li>
<li class="dir">Music Fundamentals
<li>Vocal
</li>
<li>Music Techniques
</li>
<li>Music Software
</li>
<li>Other
</li>
</ul>
<li>Academics
<ul>
<li class="dir">Social Science
</li>
<li class="dir">Math & Science
</li>
<li class="dir">Humanities
</ul>
</ul>
</nav>
<!-- end of info nav -->
<div id='course_div'>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Excel Excel Excel Excel Excel Excel
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
</div>
</body>
</html>

Another option is to add float: left; to the anchor tags in #course_div and then target every anchor element after the 5th anchor element with nth-child() to clear the floated elements before it.
#course_div a {
float: left;
}
#course_div a:nth-child(5n+6) {
clear: left;
}
SIDE NOTE: #course_info is being used repeatedly and should be a CSS class, .course_info.
/* font */
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap
{
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a
{
display:block;
text-decoration:none;
font-size:15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:7.5px 9px;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/* end of info nav */
/* course div */
#course_div {
width: 1200px;
position: relative;
left: 180px;
top: 30px;
padding: 10px;
}
#course_img {
width: 216px;
height: 121.5px;
border: 1px solid #ccc;
border-bottom: none;
}
#course_info {
border: 1px solid #ccc;
width: 205.5px;
padding: 5px;
position: relative;
top: -4px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
a .course_main {
text-decoration: none;
color: black;
width: 204px;
}
.course_main {
width: 216px;
display: inline-block;
margin-right: 30px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
#course_div a {
float: left;
}
#course_div a:nth-child(5n+6) {
clear: left;
}
/* end of course div */
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel='stylesheet' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li>Development
<ul>
<li>Web Development</li>
<li>Mobile Apps</li>
<li>Programming Languages</li>
<li>Game Development</li>
<li>Databases</li>
<li>Software Testing</li>
<li>Software Engineering</li>
<li>Development Tools</li>
<li>E-Commerce</li>
</ul>
</li>
<li>Business
<ul>
<li>Finance</li>
<li>Entrepreneurship</li>
<li>Communications</li>
<li>Management</li>
<li>Sales</li>
<li>Strategy</li>
<li>Operations</li>
<li>Project Management</li>
<li>Business Law</li>
<li>Data and Anylytics</li>
<li>Home Business</li>
<li>Human Resources</li>
<li>Industry</li>
<li>Media</li>
<li>Real Estate</li>
<li>Other</li>
</ul>
</li>
<li>IT & Software
<ul>
<li class="dir">IT Certification</li>
<li class="dir">Network & Security
<li>Hardware</li>
<li>Operating Systems</li>
<li>Other</li>
</ul>
<li>Office Productivity
<ul>
<li class="dir">Microsoft</li>
<li class="dir">Apple
<li>Google</li>
<li>SAP</li>
<li>Intuit</li>
<li>Salesforce</li>
<li>Oracle</li>
<li>Other</li>
</ul>
<li>Personal Development
<ul>
<li class="dir">Personal Transformation</li>
<li class="dir">Productivity
<li>Leadership</li>
<li>Personal Finance</li>
<li>Career Development</li>
<li>Parenting & Relationships</li>
<li>Happiness</li>
<li>Religion & Spirituality</li>
<li>Personal Brand Building</li>
<li>Creativity</li>
<li>Influence</li>
<li>Self Esteem</li>
<li>Stress Management</li>
<li>Memory and Study Skills</li>
<li>Motivation</li>
<li>Other</li>
</ul>
<li>Design
<ul>
<li class="dir">Web Design</li>
<li class="dir">Graphic Design
<li>Design Tools</li>
<li>User Experience</li>
<li>Game Design</li>
<li>Design Thinking</li>
<li>3D & Animation</li>
<li>Fashion</li>
<li>Architectural Design</li>
<li>Interior Design</li>
<li>Other</li>
</ul>
<li>Marketing
<ul>
<li class="dir">Digital Marketing</li>
<li class="dir">Search Engine Optimization
<li>Social Media Marketing</li>
<li>Branding</li>
<li>Marketing Fundamentals</li>
<li>Analystics & Automation</li>
<li>Public Relations</li>
<li>Advertising</li>
<li>Video & Mobile Marketing</li>
<li>Content Marketing</li>
<li>Non-Digital Marketing</li>
<li>Growth Hacking</li>
<li>Affiliate Marketing</li>
<li>Product Marketing</li>
<li>Other</li>
</ul>
<li>Lifestyle
<ul>
<li class="dir">Life Hacks</li>
<li class="dir">Arts & Crafts</li>
<li class="dir">Food & Beverage
<li>Beauty & Makeup</li>
<li>Travel</li>
<li>Gaming</li>
<li>Home Improvement</li>
<li>Pet Care & Training</li>
</ul>
<li>Photography
<ul>
<li class="dir">Digital Photography</li>
<li class="dir">Photography Fundamentals</li>
<li class="dir">Portraits
<li>Landscape</li>
<li>Black & White</li>
<li>Photography Tools</li>
<li>Mobile Photography</li>
<li>Travel Photography</li>
<li>Commercial Photography</li>
<li>Wedding Photography</li>
<li>Video Design</li>
<li>Other</li>
</ul>
<li>Health & Fitness
<ul>
<li class="dir">Fitness</li>
<li class="dir">General Health</li>
<li class="dir">Sports
<li>Nutrition</li>
<li>Yoga</li>
<li>Mental Health</li>
<li>Dieting</li>
<li>Self Defense</li>
<li>Safety & First Aid</li>
<li>Dance</li>
<li>Meditation</li>
<li>Other</li>
</ul>
<li>Language
<ul>
<li class="dir">English</li>
<li class="dir">Spanish</li>
<li class="dir">German
<li>French</li>
<li>Japanese</li>
<li>Portuguese</li>
<li>Chinese</li>
<li>Russian</li>
<li>Latin</li>
<li>Arabic</li>
<li>Hebrew</li>
<li>Italian</li>
<li>Other</li>
</ul>
<li>Music
<ul>
<li class="dir">Instruments</li>
<li class="dir">Production</li>
<li class="dir">Music Fundamentals
<li>Vocal</li>
<li>Music Techniques</li>
<li>Music Software</li>
<li>Other</li>
</ul>
<li>Academics
<ul>
<li class="dir">Social Science</li>
<li class="dir">Math & Science</li>
<li class="dir">Humanities
</ul>
</ul>
</nav>
<!-- end of info nav -->
<div id='course_div'>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Excel Excel Excel Excel Excel Excel
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Excel Excel Excel Excel Excel Excel
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
</div>
</body>
</html>

Add vertical-align:top; to your .course_main class:
/* font */
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
font-size: 15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
/* end of info nav */
/* course div */
#course_div {
width: 1200px;
position: relative;
left: 180px;
top: 30px;
padding: 10px;
}
#course_img {
width: 216px;
height: 121.5px;
border: 1px solid #ccc;
border-bottom: none;
}
#course_info {
border: 1px solid #ccc;
width: 205.5px;
padding: 5px;
position: relative;
top: -4px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
a .course_main {
text-decoration: none;
color: black;
width: 204px;
}
.course_main {
vertical-align:top;
width: 216px;
display: inline-block;
margin-right: 30px;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
}
/* end of course div */
<!DOCTYPE html>
<html>
<head>
<title>Hacked Genius</title>
<link rel='stylesheet' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li>Development
<ul>
<li>Web Development
</li>
<li>Mobile Apps
</li>
<li>Programming Languages
</li>
<li>Game Development
</li>
<li>Databases
</li>
<li>Software Testing
</li>
<li>Software Engineering
</li>
<li>Development Tools
</li>
<li>E-Commerce
</li>
</ul>
</li>
<li>Business
<ul>
<li>Finance
</li>
<li>Entrepreneurship
</li>
<li>Communications
</li>
<li>Management
</li>
<li>Sales
</li>
<li>Strategy
</li>
<li>Operations
</li>
<li>Project Management
</li>
<li>Business Law
</li>
<li>Data and Anylytics
</li>
<li>Home Business
</li>
<li>Human Resources
</li>
<li>Industry
</li>
<li>Media
</li>
<li>Real Estate
</li>
<li>Other
</li>
</ul>
</li>
<li>IT & Software
<ul>
<li class="dir">IT Certification
</li>
<li class="dir">Network & Security
<li>Hardware
</li>
<li>Operating Systems
</li>
<li>Other
</li>
</ul>
<li>Office Productivity
<ul>
<li class="dir">Microsoft
</li>
<li class="dir">Apple
<li>Google
</li>
<li>SAP
</li>
<li>Intuit
</li>
<li>Salesforce
</li>
<li>Oracle
</li>
<li>Other
</li>
</ul>
<li>Personal Development
<ul>
<li class="dir">Personal Transformation
</li>
<li class="dir">Productivity
<li>Leadership
</li>
<li>Personal Finance
</li>
<li>Career Development
</li>
<li>Parenting & Relationships
</li>
<li>Happiness
</li>
<li>Religion & Spirituality
</li>
<li>Personal Brand Building
</li>
<li>Creativity
</li>
<li>Influence
</li>
<li>Self Esteem
</li>
<li>Stress Management
</li>
<li>Memory and Study Skills
</li>
<li>Motivation
</li>
<li>Other
</li>
</ul>
<li>Design
<ul>
<li class="dir">Web Design
</li>
<li class="dir">Graphic Design
<li>Design Tools
</li>
<li>User Experience
</li>
<li>Game Design
</li>
<li>Design Thinking
</li>
<li>3D & Animation
</li>
<li>Fashion
</li>
<li>Architectural Design
</li>
<li>Interior Design
</li>
<li>Other
</li>
</ul>
<li>Marketing
<ul>
<li class="dir">Digital Marketing
</li>
<li class="dir">Search Engine Optimization
<li>Social Media Marketing
</li>
<li>Branding
</li>
<li>Marketing Fundamentals
</li>
<li>Analystics & Automation
</li>
<li>Public Relations
</li>
<li>Advertising
</li>
<li>Video & Mobile Marketing
</li>
<li>Content Marketing
</li>
<li>Non-Digital Marketing
</li>
<li>Growth Hacking
</li>
<li>Affiliate Marketing
</li>
<li>Product Marketing
</li>
<li>Other
</li>
</ul>
<li>Lifestyle
<ul>
<li class="dir">Life Hacks
</li>
<li class="dir">Arts & Crafts
</li>
<li class="dir">Food & Beverage
<li>Beauty & Makeup
</li>
<li>Travel
</li>
<li>Gaming
</li>
<li>Home Improvement
</li>
<li>Pet Care & Training
</li>
</ul>
<li>Photography
<ul>
<li class="dir">Digital Photography
</li>
<li class="dir">Photography Fundamentals
</li>
<li class="dir">Portraits
<li>Landscape
</li>
<li>Black & White
</li>
<li>Photography Tools
</li>
<li>Mobile Photography
</li>
<li>Travel Photography
</li>
<li>Commercial Photography
</li>
<li>Wedding Photography
</li>
<li>Video Design
</li>
<li>Other
</li>
</ul>
<li>Health & Fitness
<ul>
<li class="dir">Fitness
</li>
<li class="dir">General Health
</li>
<li class="dir">Sports
<li>Nutrition
</li>
<li>Yoga
</li>
<li>Mental Health
</li>
<li>Dieting
</li>
<li>Self Defense
</li>
<li>Safety & First Aid
</li>
<li>Dance
</li>
<li>Meditation
</li>
<li>Other
</li>
</ul>
<li>Language
<ul>
<li class="dir">English
</li>
<li class="dir">Spanish
</li>
<li class="dir">German
<li>French
</li>
<li>Japanese
</li>
<li>Portuguese
</li>
<li>Chinese
</li>
<li>Russian
</li>
<li>Latin
</li>
<li>Arabic
</li>
<li>Hebrew
</li>
<li>Italian
</li>
<li>Other
</li>
</ul>
<li>Music
<ul>
<li class="dir">Instruments
</li>
<li class="dir">Production
</li>
<li class="dir">Music Fundamentals
<li>Vocal
</li>
<li>Music Techniques
</li>
<li>Music Software
</li>
<li>Other
</li>
</ul>
<li>Academics
<ul>
<li class="dir">Social Science
</li>
<li class="dir">Math & Science
</li>
<li class="dir">Humanities
</ul>
</ul>
</nav>
<!-- end of info nav -->
<div id='course_div'>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Excel Excel Excel Excel Excel Excel
</div>
</div>
</a>
<a href='#'>
<div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div>
</div>
</a>
</div>
</body>
</html>

A jQuery soluction can be jQuery.equalHeights:
https://github.com/mattbanks/jQuery.equalHeights
It will calculate the height of your selector and set the same height to all the elements within your selector.
e.g.
<div class="test">
This is one line of text.
</div>
<div class="test">
This is three lines of text.<br>
This is three lines of text.<br>
This is three lines of text.<br>
</div>
<style type="text/css">
.test{border: solid 1px #f00};
</style>
<script>
$(document).ready(function(){
$('.test').equalHeights();
});
</script>
Another solution can be the use of flexbox, example found here: http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

Try changing display: inline-block to display: inline-table in the .course_main div in CSS
/* font */
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */
/* clear settings */
body {
padding: 0;
margin: 0;
background: white;
}
/* end of clear settings */
/* nav */
#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */
/* info nav */
#primary_nav_wrap
{
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a
{
display:block;
text-decoration:none;
font-size:15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:7.5px 9px;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
/* end of info nav */
/* course div */
#course_div {
width: 1200px;
position: relative;
left: 180px;
top: 30px;
padding: 10px;
}
#course_img {
width: 216px;
height: 121.5px;
border: 1px solid #ccc;
border-bottom: none;
}
#course_info {
border: 1px solid #ccc;
width: 205.5px;
padding: 5px;
position: relative;
top: -4px;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
}
a .course_main {
text-decoration: none;
color: black;
width: 204px;
}
.course_main {
width: 216px;
display: inline-table;
margin-right: 30px;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}
/* end of course div */
<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel='stylesheet' href='main.css'>
<script src='main.js'></script>
</head>
<body>
<!-- nav -->
<div id='nav'>
</div>
<!-- end of nav -->
<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li>Development
<ul>
<li>Web Development</li>
<li>Mobile Apps</li>
<li>Programming Languages</li>
<li>Game Development</li>
<li>Databases</li>
<li>Software Testing</li>
<li>Software Engineering</li>
<li>Development Tools</li>
<li>E-Commerce</li>
</ul>
</li>
<li>Business
<ul>
<li>Finance</li>
<li>Entrepreneurship</li>
<li>Communications</li>
<li>Management</li>
<li>Sales</li>
<li>Strategy</li>
<li>Operations</li>
<li>Project Management</li>
<li>Business Law</li>
<li>Data and Anylytics</li>
<li>Home Business</li>
<li>Human Resources</li>
<li>Industry</li>
<li>Media</li>
<li>Real Estate</li>
<li>Other</li>
</ul>
</li>
<li>IT & Software
<ul>
<li class="dir">IT Certification</li>
<li class="dir">Network & Security
<li>Hardware</li>
<li>Operating Systems</li>
<li>Other</li>
</ul>
<li>Office Productivity
<ul>
<li class="dir">Microsoft</li>
<li class="dir">Apple
<li>Google</li>
<li>SAP</li>
<li>Intuit</li>
<li>Salesforce</li>
<li>Oracle</li>
<li>Other</li>
</ul>
<li>Personal Development
<ul>
<li class="dir">Personal Transformation</li>
<li class="dir">Productivity
<li>Leadership</li>
<li>Personal Finance</li>
<li>Career Development</li>
<li>Parenting & Relationships</li>
<li>Happiness</li>
<li>Religion & Spirituality</li>
<li>Personal Brand Building</li>
<li>Creativity</li>
<li>Influence</li>
<li>Self Esteem</li>
<li>Stress Management</li>
<li>Memory and Study Skills</li>
<li>Motivation</li>
<li>Other</li>
</ul>
<li>Design
<ul>
<li class="dir">Web Design</li>
<li class="dir">Graphic Design
<li>Design Tools</li>
<li>User Experience</li>
<li>Game Design</li>
<li>Design Thinking</li>
<li>3D & Animation</li>
<li>Fashion</li>
<li>Architectural Design</li>
<li>Interior Design</li>
<li>Other</li>
</ul>
<li>Marketing
<ul>
<li class="dir">Digital Marketing</li>
<li class="dir">Search Engine Optimization
<li>Social Media Marketing</li>
<li>Branding</li>
<li>Marketing Fundamentals</li>
<li>Analystics & Automation</li>
<li>Public Relations</li>
<li>Advertising</li>
<li>Video & Mobile Marketing</li>
<li>Content Marketing</li>
<li>Non-Digital Marketing</li>
<li>Growth Hacking</li>
<li>Affiliate Marketing</li>
<li>Product Marketing</li>
<li>Other</li>
</ul>
<li>Lifestyle
<ul>
<li class="dir">Life Hacks</li>
<li class="dir">Arts & Crafts</li>
<li class="dir">Food & Beverage
<li>Beauty & Makeup</li>
<li>Travel</li>
<li>Gaming</li>
<li>Home Improvement</li>
<li>Pet Care & Training</li>
</ul>
<li>Photography
<ul>
<li class="dir">Digital Photography</li>
<li class="dir">Photography Fundamentals</li>
<li class="dir">Portraits
<li>Landscape</li>
<li>Black & White</li>
<li>Photography Tools</li>
<li>Mobile Photography</li>
<li>Travel Photography</li>
<li>Commercial Photography</li>
<li>Wedding Photography</li>
<li>Video Design</li>
<li>Other</li>
</ul>
<li>Health & Fitness
<ul>
<li class="dir">Fitness</li>
<li class="dir">General Health</li>
<li class="dir">Sports
<li>Nutrition</li>
<li>Yoga</li>
<li>Mental Health</li>
<li>Dieting</li>
<li>Self Defense</li>
<li>Safety & First Aid</li>
<li>Dance</li>
<li>Meditation</li>
<li>Other</li>
</ul>
<li>Language
<ul>
<li class="dir">English</li>
<li class="dir">Spanish</li>
<li class="dir">German
<li>French</li>
<li>Japanese</li>
<li>Portuguese</li>
<li>Chinese</li>
<li>Russian</li>
<li>Latin</li>
<li>Arabic</li>
<li>Hebrew</li>
<li>Italian</li>
<li>Other</li>
</ul>
<li>Music
<ul>
<li class="dir">Instruments</li>
<li class="dir">Production</li>
<li class="dir">Music Fundamentals
<li>Vocal</li>
<li>Music Techniques</li>
<li>Music Software</li>
<li>Other</li>
</ul>
<li>Academics
<ul>
<li class="dir">Social Science</li>
<li class="dir">Math & Science</li>
<li class="dir">Humanities
</ul>
</ul>
</nav>
<!-- end of info nav -->
<div id='course_div'>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Excel Excel Excel Excel Excel Excel
</div> </div></a>
<a href='#'> <div class='course_main'>
<img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>
<div id='course_info'>
Hi
</div> </div></a>
</div>
</body>
</html>

jQuery slideToggle jump animation on menu toggle

So my problem is just as simple as the title, when I click the big black "V" to toggle my menu, the animation jumps on the <li> with the sub menu.
I tried multiple things and none seem to work, I had a similar issue with the width which I solved by setting width to 100%. On my search I saw people that jQuery can't figure out the height of the elements but if I try to add height to the elements it totaly breaks the menu.
Here's the codepen so you can experience my problem. CODEPEN
HTML
<nav class="main-menu">
<ul>
<li class="level-1">Item 1
<span class="toggle-1">V</span>
<ul class="sub-menu-1">
<li class="level-2">Item 1.1
<span class="toggle-2">V</span>
<ul class="sub-menu-2">
<li class="level-3">Item 1.1.1</li>
<li class="level-3">Item 1.1.2</li>
<li class="level-3">Item 1.1.3</li>
<li class="level-3">Item 1.1.4</li>
</ul>
</li>
<li class="level-2">Item 1.2
<span class="toggle-2">V</span>
<ul class="sub-menu-2">
<li class="level-3">Item 1.2.1</li>
<li class="level-3">Item 1.2.2</li>
</ul>
</li>
<li class="level-2">Item 1.3</li>
</ul>
</li>
<li class="level-1">Item 2
<span class="toggle-1">V</span>
<ul class="sub-menu-1">
<li class="level-2">Item 2.1</li>
<li class="level-2">Item 2.2</li>
<li class="level-2">Item 2.3</li>
<li class="level-2">Item 2.4</li>
<li class="level-2">Item 2.5</li>
</ul>
</li>
<li class="level-1">Item 3</li>
<li class="level-1">BItem 4
<span class="toggle-1">V</span>
<ul class="sub-menu-1">
<li class="level-2">Item 4.1</li>
<li class="level-2">Item 4.2</li>
</ul>
</li>
</ul>
</nav>
CSS
.main-menu .sub-menu-1, .main-menu .sub-menu-2 {
display: none;
}
.main-menu ul {
width: 100%;
}
.main-menu li {
line-height: 25px;
}
.main-menu li.level-1 {
background-color: red;
}
.main-menu li.level-2 {
background-color: lightblue;
}
.main-menu li.level-3 {
background-color: yellow;
}
.main-menu a {
display: block;
margin-right: 20px;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
display: block;
float: right;;
font-size: 20px;
font-weight: bold;
width: 20px;
transform: translateY(-25px);
}
Javascript/jQuery
$(document).ready(function() {
$('.sub-menu-1, .sub-menu-2').hide();
$('.toggle-1').click( function() {
$(this).next('.sub-menu-1').slideToggle();
});
$('.toggle-2').click( function() {
$(this).next('.sub-menu-2').slideToggle();
});
});
Thank you in advance and hope somenone can help me out.

The issue is arising from the <span> that you have set to display: block; in your css.
Switching .main-menu a and .main-menu .toggle-1, .main-menu .toggle-2 to both be display: inline-block; fixes the issue. You can then also remove some additional unnecessary css hacks that you were previously using to forcibly place these elements outside of their document flow position.
The updated CSS is below, and you can see a fork of the pen with both sub-menus working here
.main-menu a {
display: inline-block;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
display: inline-block;
float: right;
font-size: 20px;
font-weight: bold;
width: 20px;
}

I think the only problem is that you didn't set the clear property to your float. If you set it like:
.main-menu a {
margin-right: 20px;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
float: right;
clear: none;
font-size: 20px;
font-weight: bold;
width: 20px;
}
you are good. Then you also don't need the transform: translate to shift your elements back. Here's a fork of your codepen: http://codepen.io/anon/pen/WwbPLV

Dropdown menu bootstrap multilevel

I have some question:
How to make navbar text is in the left in Bootstrap?
I'd already make the dropdown menu with bootstrap and jquery-menu-aim. But my dropdown submenu is piled up. This what my goal is.
And this is what I've done..
Can you help me? Thanks in advance. I'm using bootstrap 3.3.4.
HTML file
<header>
<div class="branding">Logo
<h3>Brand</h3>
<!--<div style="clear: both;"></div>--></div>
</header>
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-left"> Product
<ul class="dropdown-menu" role="menu">
<li class="search row-sm-3">
<input type="text" class="form-control" placeholder="Search" />
</li>
<li role="separator" class="divider"></li>
<li data-submenu-id="submenu-mobile"> Mobile Devices
<div id="submenu-mobile" class="popover">
<h3 class="popover-title">Mobile Devices</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Smartphones
</li>
<li>Tablets
</li>
<li>Other Phones
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-audio"> TV / Audio / Video
<div id="submenu-audio" class="popover">
<h3 class="popover-title">TV / Audio / Video</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Televisions
</li>
<li>Audio and Video
</li>
<li>Accessoris
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-track-trace"> Cameras and Camcorders
<div id="submenu-track-trace" class="popover">
<h3 class="popover-title">Cameras and Camcorders</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Cameras
</li>
<li>Camcorders
</li>
</ul>
</div>
</div>
</li>
<li data-submenu-id="submenu-it"> IT
<div id="submenu-it" class="popover">
<h3 class="popover-title">IT</h3>
<div class="popover-content">
<ul class="list-unstyled">
<li>Monitor
</li>
<li>Printers
</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="navbar-left">Apps
</li>
<li class="navbar-left">Support
</li>
</ul>
<ul class="nav navbar-nav navbar-right setting">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Setting
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#"><span class="glyphicon glyphicon-user"></span>
My Profile</a>
</li>
<li><a href="#"><span class="glyphicon glyphicon-inbox"></span>
Messages</a>
</li>
<li role="separator" class="divider"></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
Logout</a>
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
CSS file
.branding h3 {
position: fixed;
float: left;
left: 25%;
top: -5px;
font-weight: bold;
font-size: 18px;
color: #595959;
}
nav {
height: 30px;
float: left;
}
.navbar-fixed-top {
top: 40px;
/*font-size: 13px;*/
font-weight: bold;
background: #D9D9D9;
color: #727272;
}
.nav li a {
text-decoration: none;
color: #727272;
}
.nav li a:hover {
color: blue;
}
.disabled {
top: 15px;
}
.divider {
background: #000;
}
.dropdown-menu {
top: 50px;
border-top-color: #eee;
background: #eee;
/*width: 300px;*/
}
.popover {
background: #eee;
width: 250px;
}
.popover-title {
font-weight: bold;
}
.popover-content {
border: 0;
list-style-type: none;
}
.popover-content ul li a {
list-style-type: none;
color: #727272;
}
.popover-content ul li a:hover {
text-decoration: none;
color: blue;
}
.search {
margin: 10px;
}

Develop Reference

JavaScript is the programming language of the Web.

Hide CSS menu on click - javascript

Please give this CSS for mobile css .menubar{ display:none; }

Related

HTML collapse/expand tree not working as expected

drop-down menu that lists columns

How do I make my div's lined up?

jQuery slideToggle jump animation on menu toggle

Dropdown menu bootstrap multilevel

Categories

Resources