Develop Reference

how make specific number of button can be selected and after select change the colors of those that selected

ul.number-list li {
list-style: none;
display: inline-block;
}
ul.number-list li a {
display: block;
width: 35px;
height: 35px;
-webkit-border-radius: 35px;
border-radius: 35px;
line-height: 35px;
text-align: center;
background: purple;
color: #fff;
cursor: pointer;
}
<ul class="number-list">
<li>
<a role="button">1</a>
</li>
<li>
<a role="button">11</a>
</li>
<li>
<a role="button">31</a>
</li>
<li>
<a role="button">12</a>
</li>
<li>
<a role="button">16</a>
</li>
<li>
<a role="button">6</a>
</li>
<li>
<a role="button">12</a>
</li>
<li>
<a role="button">21</a>
</li>
<li>
<a role="button">2</a>
</li>
<li>
<a role="button">44</a>
</li>
</ul>
I'm new in javascript and I need help and I would be grateful if sombody help !
in this case I have a list of buttons and I want restrict the number of selecting buttons like 6 buttons.and each button can be select just for once and after select color of it get change.help me please to write this code.thank you

var SelectCount=0;
function ButtonSelected(id) {
if (SelectCount < 3) {
document.getElementById(id).style.backgroundColor="red";
SelectCount+=1;
}
}
ul.number-list li {
list-style: none;
display: inline-block;
}
ul.number-list li a {
display: block;
width: 35px;
height: 35px;
-webkit-border-radius: 35px;
border-radius: 35px;
line-height: 35px;
text-align: center;
background: purple;
color: #fff;
cursor: pointer;
}
<ul class="number-list">
<li >
<a id="n1" onclick="ButtonSelected('n1')" role="button">1</a>
</li>
<li>
<a id="n2" onclick="ButtonSelected('n2')" role="button">11</a>
</li>
<li>
<a id="n3" onclick="ButtonSelected('n3')" role="button">31</a>
</li>
<li>
<a id="n4" onclick="ButtonSelected('n4')" role="button">12</a>
</li>
<li>
<a id="n5" onclick="ButtonSelected('n5')" role="button">16</a>
</li>
<li>
<a id="n6" onclick="ButtonSelected('n6')" role="button">6</a>
</li>
<li>
<a id="n7" onclick="ButtonSelected('n7')" role="button">12</a>
</li>
<li>
<a id="n8" onclick="ButtonSelected('n8')" role="button">21</a>
</li>
<li>
<a id="n9" onclick="ButtonSelected('n9')" role="button">2</a>
</li>
<li>
<a id="n10" onclick="ButtonSelected('n10')" role="button">44</a>
</li>
</ul>
This code will change the button to red and increment the counter. In this code, three buttons max can be selected. Buttons cannot be deselected.

var SelectCount = 0;
function ButtonSelected(id) {
if (document.getElementById(id).style.backgroundColor == "red") {
SelectCount -= 1;
document.getElementById(id).style.backgroundColor = "purple";
document.getElementById("checker").innerHTML = SelectCount + " selected (3 max)";
} else {
if (SelectCount < 3) {
document.getElementById(id).style.backgroundColor = "red";
SelectCount += 1;
document.getElementById("checker").innerHTML = SelectCount + " selected (3 max)";
} else {
document.getElementById("checker").innerHTML = "You must unselect another button before selecting this one.<br />Maximum of three buttons selected reached.";
}
}
}
ul.number-list li {
list-style: none;
display: inline-block;
}
ul.number-list li a {
display: block;
width: 35px;
height: 35px;
-webkit-border-radius: 35px;
border-radius: 35px;
line-height: 35px;
text-align: center;
background: purple;
color: #fff;
cursor: pointer;
}
<ul class="number-list">
<li>
<a id="n1" onclick="ButtonSelected('n1')" role="button">1</a>
</li>
<li>
<a id="n2" onclick="ButtonSelected('n2')" role="button">11</a>
</li>
<li>
<a id="n3" onclick="ButtonSelected('n3')" role="button">31</a>
</li>
<li>
<a id="n4" onclick="ButtonSelected('n4')" role="button">12</a>
</li>
<li>
<a id="n5" onclick="ButtonSelected('n5')" role="button">16</a>
</li>
<li>
<a id="n6" onclick="ButtonSelected('n6')" role="button">6</a>
</li>
<li>
<a id="n7" onclick="ButtonSelected('n7')" role="button">12</a>
</li>
<li>
<a id="n8" onclick="ButtonSelected('n8')" role="button">21</a>
</li>
<li>
<a id="n9" onclick="ButtonSelected('n9')" role="button">2</a>
</li>
<li>
<a id="n10" onclick="ButtonSelected('n10')" role="button">44</a>
</li>
</ul>
<div id="checker">
Select up to three buttons.
</div>
This answer allows deselecting a button and provides user feedback as well. As in my other answer, a max of three buttons can be selected at a time.

ul.number-list li {
list-style: none;
display: inline-block;
}
ul.number-list li a {
display: block;
width: 35px;
height: 35px;
-webkit-border-radius: 35px;
border-radius: 35px;
line-height: 35px;
text-align: center;
background: purple;
color: #fff;
cursor: pointer;
}
ul.number-list li a.selected {
background: red;
}
<ul class="number-list">
<li>
<a role="button">1</a>
</li>
<li>
<a role="button">11</a>
</li>
<li>
<a role="button">31</a>
</li>
<li>
<a role="button">12</a>
</li>
<li>
<a role="button">16</a>
</li>
<li>
<a role="button">6</a>
</li>
<li>
<a role="button">12</a>
</li>
<li>
<a role="button">21</a>
</li>
<li>
<a role="button">2</a>
</li>
<li>
<a role="button">44</a>
</li>
</ul>
<script>
window.addEventListener('load', function () {
document.querySelectorAll("ul.number-list li a").addEventListener('click', function() {
this.className = 'selected';
});
});
</script>

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>

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;
}

Jquery show only current parent childrens. Hide another families

Have 3 level menu:
jQuery("#product_cats_nav li").toggle(
function () {
//var current = jQuery(this).closest('.level1');
//jQuery(current).siblings().addClass("hide");
jQuery(this).children().removeClass("hide").addClass("show");
},
function () {
jQuery(this).find("ul").removeClass("show").addClass("hide");
}
);
.hide {
display: none
};
.show {
display: block
};
#top_menu ul {
border: 1px solid red;
background-color: lime ;
position: absolute;
margin: 0;
width: 100%;
z-index: 100;
}
#top_menu li {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="col-full" id="top_menu">
<ul id="product_cats_nav">
<li class="level1" menu-level="1">Level1 A
<ul class="hide">
<li class="level2" menu-level="2">Level2 A
<ul class="hide">
<li class="level3" menu-level="3">
Level3 A</li>
</ul>
</li>
</ul>
</li>
<li class="level1" menu-level="1">Level1 B
<ul class="hide">
<li class="level2" menu-level="2">Level2 B
<ul class="hide">
<li class="level3" menu-level="3">
Level3 B</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Goal:
When some submenu(level2) or (level1) is clicked and active (opened) close all another level1 childrens.
Current js just toogle one block with another, but not hide elements of another level1 children fammily
In snippet i had comment out my triyings with sibling..
How to solve that?

Is this what you are looking for?
jQuery("#product_cats_nav li").toggle(
function () {
//var current = jQuery(this).closest('.level1');
//jQuery(current).siblings().addClass("hide");
jQuery(this).closest('#product_cats_nav').find('ul').removeClass("show").addClass("hide");
jQuery(this).children().removeClass("hide").addClass("show");
},
function () {
jQuery(this).find("ul").removeClass("show").addClass("hide");
}
);
.hide {
display: none
};
.show {
display: block
};
#top_menu ul {
border: 1px solid red;
background-color: lime ;
position: absolute;
margin: 0;
width: 100%;
z-index: 100;
}
#top_menu li {
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="col-full" id="top_menu">
<ul id="product_cats_nav">
<li class="level1" menu-level="1">Level1 A
<ul class="hide">
<li class="level2" menu-level="2">Level2 A
<ul class="hide">
<li class="level3" menu-level="3">
Level3 A</li>
</ul>
</li>
</ul>
</li>
<li class="level1" menu-level="1">Level1 B
<ul class="hide">
<li class="level2" menu-level="2">Level2 B
<ul class="hide">
<li class="level3" menu-level="3">
Level3 B</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Hide CSS menu on click

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;
}