How do I make my div's lined up?

How do I make my div's lined up? - javascript

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>

Related

How to occupy 100% of the height

I'm trying to do a navbar but I have a responsive problem when trying to occupy 100% of the height of the screen.
any solution? thanks to all
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navbar</title>
<link rel="stylesheet" href="styles.css" />
<!-- FONT AWESOME -->
<script
src="https://kit.fontawesome.com/96fadf0e69.js"
crossorigin="anonymous"
></script>
<!-- FONT AWESOME -->
</head>
<body>
<nav class="navbar">
<img class="navbar__logo" src="gamezonia.png" alt="logo" />
<ul class="navbar__list">
<li class="list__item">Inicio</li>
<li class="list__item">Categoria 1</li>
<li class="list__item">Categoria 2</li>
<li class="list__item">Categoria 3</li>
<li class="list__item">Contacto</li>
<li class="list__item">Acceder</li>
<li class="list__item--search"><i class="fas fa-search"></i></li>
</ul>
<div class="navbar__hamburger">
<i class="fas fa-bars"></i>
</div>
</nav>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<ul>
<li>prueba</li>
</ul>
<script src="./index.js"></script>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar{
display: flex;
background-color: #2B2F33;
font-family: 'Roboto', sans-serif;
}
.navbar__logo{
width: 100%;
display: inline;
width: 25%;
margin-right: 30px;
margin-left: 10px;
}
.navbar__list{
display: flex;
width: 100%;
list-style: none;
align-items: center;
color: #ffffff;
}
.list__item{
margin-right: 30px;
}
.list__item--search{
margin-left: auto;
margin-right: 30px;
}
.navbar__hamburger{
display: none;
color: #ffffff;
align-self: center;
}
#media (max-width: 850px){
.navbar{
position: relative;
}
.navbar__list{
display: block;
position: absolute;
width: 30%;
height: 100vh;
background-color: #2B2F33;
top: 100%;
transform: translateX(-100%);
transition: transform 0.5s;
}
.navbar__hamburger{
display: block;
margin-left: auto;
margin-right: 30px;
}
.showMenu{
transform: translateX(0%);
}
.list__item, .list__item--search{
padding: 10px;
margin-left: 10px;
}
}
JS:
console.log('works')
document.querySelector('.navbar__hamburger').addEventListener('click', ()=>{
document.querySelector('.navbar__list').classList.toggle('showMenu')
})

From your screenshot it seems like that navbar is scrolled up (the first four lis at the top are missing or not visible), so I would guess its container (nav) is higher than the screen and scrolls, or the navbar is somehow moved up under the top border of the screen.
A simple solution would be to change position from absolute to fixed, the the 100vh high navbar would remain in position and not scroll. You might have to adjust some other settings, but I supposse that should work.

Since the sidenav is inside the <nav> you can't use height: 100%. What you could do is combine position: fixed and height: 100vh like this:
.navbar__list {
display: block;
position: fixed;
width: 30%;
height: 100vh;
background-color: #2B2F33;
top: 0px;
transform: translateX(-100%);
transition: transform 0.5s;
}
It will still need some changes in order to keep the sidenav under the nav but it's a good start.

Submenu dissappears on mouse hover

I want the dropdown menu behave like here: https://svyaznoy.ru
var timer;
$(".catalog-menu li").mouseenter(function() {
var that = this;
timer = setTimeout(function(){
$(that).children(".submenu").show();
}, 500);
}).mouseleave(function() {
var that = this;
clearTimeout(timer);
setTimeout(function () {
$(that).children(".submenu").hide();
}, 500);
});
ul {
list-style-type: none;
padding-left: 0;
}
ul.submenu {
display: none;
position: absolute;
left: 100%;
top: 1px;
margin-left: -1px;
}
li {
padding: 10px;
border: 1px solid #ddd;
margin-top: -1px;
}
li.submenu-item {
min-width: 110px;
}
ul.catalog-menu {
width: 150px;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul class="catalog-menu">
<li>
<span>Apple</span>
<ul class="submenu">
<li class="submenu-item">
<span>Laptops</span>
<ul class="submenu">
<li class="submenu-item">Macbook 12</li>
<li class="submenu-item">Macbook Pro 13</li>
<li class="submenu-item">Macbook Pro 15</li>
<li class="submenu-item">Macbook Air Retina</li>
</ul>
</li>
<li class="submenu-item">
<span>iPhones</span>
<ul class="submenu">
<li class="submenu-item">iPhone 8</li>
<li class="submenu-item">iPhone 8 Plus</li>
<li class="submenu-item">iPhone X</li>
<li class="submenu-item">iPhone XS</li>
<li class="submenu-item">iPhone XS Max</li>
</ul>
</li>
</ul>
</li>
<li>Samsung</li>
<li>Xiaomi</li>
</ul>
It works somewhat similar to svyaznoy.ru, but have a bug.
For example, I hover on "Apple" menu item. Laptops and iPhones show up. Next I hover on "Laptops". Some apple laptop models show up. And here's where the bug shows: if my mouse pointer doesn't leave "Laptops" item and goes straight to laptops submenu - all is ok, but when it leaves "Laptops" on the way to laptops list, e.g. it hovers on iPhones for a moment, then laptops list hides, and I want it to stay there. How can I fix this bug?
jsfiddle: https://jsfiddle.net/16region/vtrj9wgk/30/

You can change display: none to visibility: hidden and add transition-delay. And so you wont need jquery/js
ul {
list-style-type: none;
padding-left: 0;
}
ul.submenu {
visibility: hidden;
position: absolute;
left: 100%;
top: 1px;
margin-left: -1px;
transition: 0s visibility;
transition-delay: 0.5s;
}
li {
padding: 10px;
border: 1px solid #ddd;
margin-top: -1px;
}
li:hover > ul.submenu {
visibility: visible;
}
li.submenu-item {
min-width: 110px;
}
ul.catalog-menu {
width: 150px;
position: relative;
}
<ul class="catalog-menu">
<li>
<span>Apple</span>
<ul class="submenu">
<li class="submenu-item">
<span>Laptops</span>
<ul class="submenu">
<li class="submenu-item">Macbook 12</li>
<li class="submenu-item">Macbook Pro 13</li>
<li class="submenu-item">Macbook Pro 15</li>
<li class="submenu-item">Macbook Air Retina</li>
</ul>
</li>
<li class="submenu-item">
<span>iPhones</span>
<ul class="submenu">
<li class="submenu-item">iPhone 8</li>
<li class="submenu-item">iPhone 8 Plus</li>
<li class="submenu-item">iPhone X</li>
<li class="submenu-item">iPhone XS</li>
<li class="submenu-item">iPhone XS Max</li>
</ul>
</li>
</ul>
</li>
<li>Samsung</li>
<li>Xiaomi</li>
</ul>

HTML collapse/expand tree not working as expected

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

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

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

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

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.

How do I make my div's lined up? - javascript

Related

How to occupy 100% of the height

Submenu dissappears on mouse hover

HTML collapse/expand tree not working as expected

Dropdown menu bootstrap multilevel

Hide CSS menu on click

Categories

Resources