Dropdown menu bootstrap multilevel

Dropdown menu bootstrap multilevel - javascript

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

Related

How to open nested row of tab based on selection?

I have these 3 row of tabs. First row has options Construction and Interior. On clicking construction it should open the row of tabs with id as construction and make interiors disappear and on clicking Interior Tab it should be able to open the row with id as interiors. Kindly help if this is possible only with CSS, or should we use Javascript? Have tried many ways with CSS, but unable to do so.
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#construction">Construction</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="interior">Interiors</a>
</li>
</ul>
<br>
<br>
<div id="construction">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home">Basic</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Standard</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Premium</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Luxury</a>
</li>
</ul>
</div>
<div id="interior">
<ul class="nav nav-tabs nav-justified" role="tablist" id="interior">
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#home">Basic Interiors</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Standard Interiors</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Premium Interiors</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Luxury Interiors</a>
</li>
</ul>
</div>

an example of a trick to use :check pseudo with hidden radio input
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 45px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
<p>Stuff for Tab One</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
<p>Stuff for Tab Two</p>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
<p>Stuff for Tab Three</p>
</div>
</div>
</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>

Bootstrap not closing menu

I maked one html site using bootstrap. That sites have one menu but i think problem is my javascript i maked it that auto open when mouseover it menu but not closed automatic.
(function($){
$(document).ready(function(){
$('ul.nav [data-toggle=dropdown]').on('mouseover', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
.navbar-brand {display:none;}
.fullwidth {width:100%; background:#1e537f;}
.navbar {
position: relative;
min-height: 40px;
margin-bottom: 0;
border: 1px solid transparent;
width:100%;
text-align:center;
}
.navbar-header {}
.navbar-inverse .navbar-nav>li>a {color:#FFFFFF;}
.navbar-inverse
{background:#1e537f; text-align:center;}
.navbar-nav>li {text-align:center;}
.navbar-inverse .navbar-brand {color:#FFFFFF;}
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {background:#143957;}
.navbar-inverse .navbar-toggle {background:#143957; border:none;}
.navbar-nav>a:hover {background:#1b4b72;}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {background:#1b4b72;}
.navbar ul{text-align:center; padding:0 0 0 30%; }
.navbar ul li {text-align:left;}
.navbar ul li ul {padding:0;}
.navbar-nav>li>.dropdown-menu {background:#1b4b72; }
.navbar-inverse .navbar-nav>li>a:hover {background:#1b4b72;}
.dropdown-menu {border:none; }
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #FFFFFF;
white-space: nowrap;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {background:#143957;
color:#FFFFFF; }
.dropdown-menu>li>a:hover {
display: block;
background:#143957;
color:#FFFFFF;
border-radius:4px;
}
.dropdown-submenu>.dropdown-menu {background:#1b4b72;}
.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:0;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}
.carousel-indicators li {width:40px; height:40px;border-radius:50%; background:#FFFFFF;}
.carousel-indicators .active {width:40px; height:40px;border-radius:50%; background:#1e537f; border:none;}
.carousel-caption {margin-bottom:80px;}
.carousel-caption h2{ font-size:46px;}
.carousel-control.right, .carousel-control.left {background:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<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="#" target="_blank">Menu</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li> Anasayfa </li>
<li class="dropdown"> Kurumsal <b class="caret"></b>
<ul class="dropdown-menu">
<li>Hakkımızda </li>
<li>Çözüm Ortaklarımız </li>
<li>Sosyal Sorumluluk </li>
<li>Basın Odası </li>
</ul></li>
<li class="dropdown">Hizmetler <b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">Araç Sigortaları
<ul class="dropdown-menu">
<li>Tam Kasko Paket Poliçesi </li>
<li>Trafik Sigortası </li>
<li>Yeşil Kart Sigortası </li>
</ul></li>
<li class="dropdown dropdown-submenu">İşyeri ve Konut Sigortaları
<ul class="dropdown-menu">
<li>İşyeri Paket Sigortaları </li>
<li>Konut Paket Sigortaları </li>
<li>Dask Sigortası </li>
</ul></li>
<li class="dropdown dropdown-submenu">Sorumluluk Sigortaları
<ul class="dropdown-menu">
<li>Üçüncü Şahıs Mali Sorumluluk </li>
<li>Asansör Sorumluluk</li>
<li>İşveren Sorumluluk</li>
<li>Mesleki Sorumluluk</li>
<li>Zorunlu Hekim Sigortası</li>
<li>Ferdi Kaza Sigortası</li>
<li>Taşınan Para Sigortası</li>
<li>Emniyeti Suistimal Sigortası</li>
<li>Ürün Mali Sorumluluk Sigortası</li>
<li>Seyahat Sigortası</li>
</ul></li>
<li class="dropdown dropdown-submenu">Nakliyat Sigortaları
<ul class="dropdown-menu">
<li>Mal Nakli Sigortaları </li>
<li>Nakliyat Sorumluluk Sigortaları</li>
<li>Deniz Araçları Sigortası </li>
</ul></li>
<li class="dropdown dropdown-submenu">Mühendislik Sigortaları
<ul class="dropdown-menu">
<li>Elektronik Cihaz Sigortası </li>
<li>Makina Kırılması Sigortası</li>
<li>İnşaat Sigortası</li>
</ul></li>
<li class="dropdown dropdown-submenu">Sağlık Sigortaları
<ul class="dropdown-menu">
<li>Sağlık Sigortası </li>
<li>Tamamlayıcı Sağlık Sigortası</li>
</ul></li>
</ul>
</li>
<li> Servisler </li>
<li> Kariyer </li>
<li> İletişim </li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
You can test my code it is on up.

You will want to create a mouseenter function for the dropdown toggle and then a mouseleave function for the dropdown and dropdown-submenu. If im understanding your problem correctly. So your code should look something like this I think.
$('ul.nav [data-toggle=dropdown').on({
mouseenter: function(event) {
if (!$(this).hasClass("open")) {
$(this).parent().toggleClass('open');
}
}
});
$('ul.nav .dropdown, .dropdown-submenu').on({
mouseleave: function(event) {
if ($(this).hasClass("open")) {
$(this).toggleClass('open');
}
}
});
Here is a link to a fiddle with it working Fiddle.
Just to let you know you may run into some problems with your menu being too long because when the mouse leaves the dropdown menu and submenus the menu will close so they will not be able to scroll down to see all of the links but if I understand your problem correctly I think this should solve your problem.
P.S I left the event in there in case you need an event to be executed but if not you can take it out.

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

Develop Reference

JavaScript is the programming language of the Web.

Dropdown menu bootstrap multilevel - javascript

Related

How to open nested row of tab based on selection?

drop-down menu that lists columns

How do I make my div's lined up?

Bootstrap not closing menu

Hide CSS menu on click

Categories

Resources