Right Column not perfectly aligned - javascript

I'm creating a lms for a project,
But the problem is the Calendar is not properly horizonatly aligned. It's kind of aligned middle of the screen. I want it to push right corner but it is not happening at the moment.
I'm using Bootstrap.
Here's CODEPEN link
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
#nav > .navbar-inner {
border-left: 0;
border-right: 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
body{
margin:0;
padding:0;
}
.nav-sidebar {
width: 100%;
padding: 0px 0;
/* border: 1px solid #ddd; */
}
.nav-sidebar a {
color: #333;
-webkit-transition: all 0.08s linear;
-moz-transition: all 0.08s linear;
-o-transition: all 0.08s linear;
transition: all 0.08s linear;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.nav-sidebar .active a {
cursor: default;
background-color: #428bca;
color: #fff;
text-shadow: 1px 1px 1px #666;
}
.nav-sidebar .active a:hover {
background-color: #428bca;
}
.nav-sidebar .text-overflow a,
.nav-sidebar .text-overflow .media-body {
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
/* Right-aligned sidebar */
.nav-sidebar.pull-right {
border-right: 0;
border-left: 1px solid #ddd;
}
.nav-sidebar.pull-right a {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.center_row{
max-width: 800px;
margin-top: -30px;
margin-left:25px;
margin-right: 150px;
color:#428bca;
text-transform: capitalize;
}
.left-side{
float:right;
}
.navbar > .container {width:auto;}
* {box-sizing:border-box;}
ul {list-style-type: none;}
body {font-family: Verdana,sans-serif;}
.month {
padding: 70px 25px;
width: 100%;
background: #428bca;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
padding: 5px;
background: #428bca;
color: white !important
}
/* Add media queries for smaller screens */
#media screen and (max-width:720px) {
.weekdays li, .days li {width: 13.1%;}
}
#media screen and (max-width: 420px) {
.weekdays li, .days li {width: 12.5%;}
.days li .active {padding: 2px;}
}
#media screen and (max-width: 290px) {
.weekdays li, .days li {width: 12.2%;}
}
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src=" http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css"></script>
</head>
<body>
<!---FIXED NAV BAR START --->
<nav class="navbar navbar-fixed-top navbar-default" role="navigation" container="false">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsable">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img src="aaa.gif" class="img-responsive" alt="Cinque Terre" width="70" height="35">
</a>
</div><div class="collapse navbar-collapse" id="navbar-collapsable">
<ul class="nav navbar-nav navbar-right">
<p class="navbar-text">Logged in as Some Person</p>
<li>
<a href="/log_out">
Log out
</a>
</li>
</ul>
</div>
</div>
</nav>
<!---FIXED NAV BAR END --->
<br>
<br>
<br>
<br>
<div class="center_row">
<div class="row ">
<div class="col-md-8">
<div class="right_side">
<h3>LEARNING MANAGEMENT SYSTEM OF AAA</h3>
</div>
</div>
<div class="col-md-4">
<div class="left_side" style="margin-left:100px;margin-right:-500px;">
<h3 id="demo" class="text-right" style="text-transform: uppercase; "></h3>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
</script>
</div>
</div>
</div>
</div>
<br>
<!-----LEFT HAND NAV BAR-->
<div class="row">
<div class="col-md-4">
<div class="container">
<div class="row">
<div class="col-md-2">
<nav class="nav-sidebar">
<ul class="nav">
<li class="active"><span class="glyphicon glyphicon-paperclip"></span> AAA Research Publications</li>
<li>AAA Quaterly News</li>
<li>Student Handbooks</li>
<li>Award Handbooks</li>
<li>Regulations</li>
<li>Examination Time Tables</li>
<li>Class Time Tables</li>
<li>Contact Us</li>
<li class="nav-divider"></li>
<li><i class="glyphicon glyphicon-off"></i> Sign in</li>
</ul>
</nav>
</div>
<div class="col-md-8" >
<h3 style="color: #428bca;">LATEST NEWS</h3>
</div>
<div class="col-md-2" id="pull-right" style="float:right !important;">
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li style="text-align:center">
August<br>
<span style="font-size:18px">2016</span>
</li>
</ul>
</div>
<ul class="weekdays">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class="active">10</span></li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-----LEFT HAND NAV BAR END-->
</body>
</html>
EDIT:
What i want is as follows,


As per my view you should change the column grid as you are using col-md-4 but as you said you need it then go with col-md-12 and container-fluid to get the desired result.
container always have fixed width in different different resolution(in px) but if you want full width then try to use container-fluid which will take 100% according to all screen.
Check my codepan. I have removed row as it was taking extra margin and i have applied container-fluid to get the desired output. hope it will help.
NOTE In .navbar-brand class you are using fix height(50px) by which your logo image is going out. Either increase the size of nav bar or remove that height so logo will be in nav bar. Thank you


Change your section with below
<!-----LEFT HAND NAV BAR-->
<div class="row">
<div class="col-md-12">
<div class="container">
<div class="col-md-2">
<nav class="nav-sidebar">
<ul class="nav">
<li class="active"><span class="glyphicon glyphicon-paperclip"></span> AAA Research Publications</li>
<li>AAA Quaterly News</li>
<li>Student Handbooks</li>
<li>Award Handbooks</li>
<li>Regulations</li>
<li>Examination Time Tables</li>
<li>Class Time Tables</li>
<li>Contact Us</li>
<li class="nav-divider"></li>
<li><i class="glyphicon glyphicon-off"></i> Sign in</li>
</ul>
</nav>
</div>
<div class="col-md-8">
<h3 style="color: #428bca;">LATEST NEWS</h3>
</div>
<div class="col-md-4" id="pull-right" style="float:right !important;">
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li style="text-align:center">
August<br>
<span style="font-size:18px">2016</span>
</li>
</ul>
</div>
<ul class="weekdays">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class="active">10</span></li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</div>
</div>
</div>
</div>
<!-----LEFT HAND NAV BAR END-->
Let me know if it doesn't look exactly like you want.

Related

Javascript collapse DIV on click

I'm learning javascript, but I'm encountering some problems I need help with. I have a notification box with different groups. I'm wanting it to be possible for only one notification group to be open at a time.
With CSS, i'm having all notification groups collapsed by default. Whenever someone clicks on new group tab, the existing group should collapse and the new tab should open.
CodePin: https://codepen.io/dansbyt/pen/xxgayPa
$('.notification-tab').click(function(e){
if($(e.currentTarget).parent().hasClass('active')){
$('.notification-group').removeClass('active');
}
else{
$('.notification-group').removeClass('active');
$(e.currentTarget).parent().toggleClass('active');
}
})
.notification-list-item{
padding: 5px 25px 15px;
border-bottom: 1px solid #e3e3e3}
.notification-list-item:nth-child(even){background-color: #E3E3E3}
.notification-tab {
border-bottom: 1px solid #e3e3e3;
display: inline-block;
width: 100%}
.visible {display: block !important}
.profiledrop {
width: 300px;
height: auto;
display: none;
max-height: 400px;
overflow-y: auto;
padding: 0;
margin: 0;
background: #eee;
margin-top: 3px;
margin-right: -15px;
border-top: 4px solid blue;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);
box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);}
.notification-group{
border-bottom: 1px solid #e3e3e3;
overflow: hidden;
min-height: 65px;}
.notification-list{
padding: 0;
overflow-y: auto;
height: 0px;
max-height: 200px;
transition: height .15s;}
.active .notification-list {height: 200px;}
.active .notification-tab, .notification-tab:hover {background-color: #5B7042}
.active .label, .notification-tab:hover .label {border: 1px solid white}
.notification-tab:hover {color: white}
.active .label, .active h4 {color: white}
a {color: #5B7042; text-decoration: none; font-weight: bold}
.label{
float: right;
margin-top: 20px;
margin-right: 10px;
color: $primary-color;
border: 1px solid orange;
padding: 0px 7px;
border-radius: 15px;}
h4 {margin-left: 10px}
h4, .label{display: inline-block;}
.item-footer .date{float: right}
.expanded {background-color: purple}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-container">
<a href="#" id='launch'>Hi</a>
<ul class="profiledrop visible">
<li class="notification-group">
<div class="notification-tab">
<h4>Tasks</h4>
<span class="label">4</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message">Complete an assignment you need to do before the deadline on Monday.</p>
<div class="item-footer">
<span class="from">project3</span>
<span class="date">2m ago</span>
</div>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Behavior</h4>
<span class="label">3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message">Alivia was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">5s ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Marshall was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">30m ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Trae was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">1d ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Kennedy was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">5d ago</span>
</div>
</li>
</ul>
</li>
<li class="notification-group active">
<div class="notification-tab">
<h4>Homework</h4>
<span class="label">3/3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message">History homework added by Patrick.</p>
<div class="item-footer">
<span class="from">View Assignment</span>
<span class="date">2m ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Math homework added by Patrick.</p>
<div class="item-footer">
<span class="from">View Assignment</span>
<span class="date">2m ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Science homework added by Brandi.</p>
<div class="item-footer">
<span class="from">View Assignment</span>
<span class="date">2m ago</span>
</div>
</li>
</ul>
</li>
</ul>
</div>

How to let an A href link in the menu bar when clicked, it opens a closed accordion in the body? - html

how the first accordion could be opened when clicked on the a href named "open 1st accordion" and the same thing for the second a href?? The accordion itself works 100% right, I just want to access it from outside it's scope, when clickng on an a href button in the menu bar.
$(".expand").on("click", function () {
$(".right-arrow").text("+");
$(".detail:visible").slideUp();
if(!$(this).next().is(":visible")){
$(this).next().slideDown(200);
$(this).find(".right-arrow").text("-");
}
});
/*Tips & Tricks Page*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#trickslist {
font-family: 'Open Sans', sans-serif;
width: 80%;
margin: 0 auto;
display: table;
}
#trickslist ul {
padding: 0;
margin: 20px 0;
color: #555;
}
#trickslist ul > li {
list-style: none;
border-top: 1px solid #ddd;
display: block;
padding: 15px;
overflow: hidden;
text-align: center;
}
#trickslist ul:last-child {
border-bottom: 1px solid #ddd;
}
#trickslist ul > li:hover {
background: #efefef;
}
.expand {
display: block;
text-decoration: none;
color: #555;
cursor: pointer;
}
.tipstricks {
padding: 5px;
margin: 0;
font-size: 17px;
font-weight: 400;
}
span {
font-size: 12.5px;
}
#left,#right{
display: table;
}
.detail a {
text-decoration: none;
color: #C0392B;
border: 1px solid #C0392B;
padding: 6px 10px 5px;
font-size: 14px;
}
.detail {
margin: 10px 0 10px 0px;
display: none;
line-height: 22px;
height: 150px;
}
.detail span{
margin: 0;
}
.right-arrow {
padding-top: 0px;
margin-top: 0px;
margin-left: 20px;
width: 10px;
height: 100%;
float: right;
font-weight: bold;
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Open 1st accordion <br>
Open 2nd accordion
<div class="container">
<div class="row" id="accordion1">
<div id="trickslist">
<ul>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<div>
<h2 class="tipstricks">Exploring your Motivations to Quit Tobacco</h2>
</div>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">What to expect over time.</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Getting Ready: Strategies to conquer urges & set a quit date</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Quitting tobacco with medications</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Dealing with depression or stress</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Avoiding weight gain or alcohol</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Making your plan stick: relapse prevention</h2>
</a>
<div class="detail">
</div>
</li>
</ul>
</div>
</div>
</div>
Services.html (every a href in this menu should link to accordions in index.html and open them)
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item" >
<a class="nav-link" href="about.html">Who We Are
</a>
</li>
<li class="nav-item">
<a class="accord" href="">Our Services</a>
</li>
<li class="nav-item" id="nav">
<img src="assets/images/name.png"/>
</li>
<li class="nav-item">
<a class="accord" href="">Our Clients</a>
</li>
<li class="nav-item">
<a class="accord" href="" >Contact Us</a>
</li>
</ul>
</div>

Add a class to the top tags a:
<a class="accord" href=""> Open 1st accordion </a> <br>
<a class="accord" href=""> Open 2nd accordion </a>
Next, using the each() method and the index parameter, write the logic of the click event on these a tags.
Use event.preventDefault() to disable the default behavior of the a tag.
And using the trigger() method, call click events on the .expand class using an eq() with the appropriate index:
$(".expand").eq(index).trigger('click');
As such, we get the following code. Just add it to your main code.
$('.accord').each(function(index) {
$(this).click(function(event) {
event.preventDefault();
$(".expand").eq(index).trigger('click');
});
});
EDIT:
Modified the jquery code taking into account the localStorage().
$(document).ready(function () {
$(".expand").on("click", function () {
$(".right-arrow").text("+");
$(".detail:visible").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown(200);
$(this).find(".right-arrow").text("-");
}
});
let click_state = localStorage.getItem("click_state");
let ind = localStorage.getItem("ind");
if (click_state == 1) {
$(".expand").eq(ind).trigger("click");
localStorage.removeItem("click_state");
localStorage.removeItem("ind");
} else {
}
$(".accord").each(function (index) {
$(this).click(function (event) {
event.preventDefault();
localStorage.setItem("click_state", 1);
localStorage.setItem("ind", index);
});
});
});
/*Tips & Tricks Page*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#trickslist {
font-family: 'Open Sans', sans-serif;
width: 80%;
margin: 0 auto;
display: table;
}
#trickslist ul {
padding: 0;
margin: 20px 0;
color: #555;
}
#trickslist ul > li {
list-style: none;
border-top: 1px solid #ddd;
display: block;
padding: 15px;
overflow: hidden;
text-align: center;
}
#trickslist ul:last-child {
border-bottom: 1px solid #ddd;
}
#trickslist ul > li:hover {
background: #efefef;
}
.expand {
display: block;
text-decoration: none;
color: #555;
cursor: pointer;
}
.tipstricks {
padding: 5px;
margin: 0;
font-size: 17px;
font-weight: 400;
}
span {
font-size: 12.5px;
}
#left,#right{
display: table;
}
.detail a {
text-decoration: none;
color: #C0392B;
border: 1px solid #C0392B;
padding: 6px 10px 5px;
font-size: 14px;
}
.detail {
margin: 10px 0 10px 0px;
display: none;
line-height: 22px;
height: 150px;
}
.detail span{
margin: 0;
}
.right-arrow {
padding-top: 0px;
margin-top: 0px;
margin-left: 20px;
width: 10px;
height: 100%;
float: right;
font-weight: bold;
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a class="accord" href=""> Open 1st accordion </a> <br>
<a class="accord" href=""> Open 2nd accordion </a>
<div class="container">
<div class="row" id="accordion1">
<div id="trickslist">
<ul>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<div>
<h2 class="tipstricks">Exploring your Motivations to Quit Tobacco</h2>
</div>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">What to expect over time.</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Getting Ready: Strategies to conquer urges & set a quit date</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Quitting tobacco with medications</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Dealing with depression or stress</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Avoiding weight gain or alcohol</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Making your plan stick: relapse prevention</h2>
</a>
<div class="detail">
</div>
</li>
</ul>
</div>
</div>
</div>

I am having problem with the toggle button in the menu, when its max-width = 1200px,. i.e. When i toggle on to the toggle button, nothing appears

I am having problem with the toggle button in the menu, when its max-width = 1200px,. i.e. When i toggle on to the toggle button, nothing appears.
Though i have made the menu for max-width = 1200px but still it doesn't appears. Please help
I have added bootstrap 4.3 in the html script. Please if anyone can have a look at it and help me out. As i am having a problem with this and i want it to be done through css as i am not well equipped with javascript.
ol, ul {
margin: 0;
padding: 0;
list-style: none;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: none;
}
/*********************************
*** Marque
*********************************/
.marquee {
background: #2a4563;
box-shadow: 0 0 5px 0;
padding: 1px;
/*border: 1px;
border-left: 10px;
border-style: solid;
border-color: #FF5733 ;*/
}
.marquee a {
color: white;
text-decoration: none;
font-size: 18px;
line-height: 1.5;
}
/*********************************
*** Logo Bar
*********************************/
#logo-bar {
background: #fff;
padding-top: 3px;
}
#logo-bar .logo {
display: flex;
align-items: center;
}
#logo-bar .logo img{
max-width: 280px;
}
#logo-bar .logo-2 img{
max-width: 200px;
margin-left: 70px;
}
#menu {
background: #2a4563;
box-shadow: 0 0 3px 0;
}
#menu ul {
text-align: center;
margin-bottom: 0;
}
#menu ul li {
display: inline-block;
padding: 8px 20px;
}
#menu ul li:hover {
background-color: orange;
transition: ease-in .3s;
}
#menu ul li a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
#menu ul li:hover a {
color: black;
transition: ease-in .3s;
}
#menu ul li ul {
display: none;
position: absolute;
padding: 10px;
background: orange;
}
#menu ul li:hover ul {
display: block;
z-index: 1;
padding: 10px;
}
#menu ul li ul li {
display: block;
}
#menu ul li ul li:hover {
background: #2a4563;
transition: ease-in .3s;
}
#menu ul li ul li:hover a {
color: #fff;
transition: ease-in .3s;
}
label{
font-size: 26px;
line-height: 70px;
display: none;
}
#toggle{
display: none;
}
.mobile-menu{
display: none;
}
/*********************************
*** Title
*********************************/
#title{
min-height: 550px;
background: grey;
}
#media only screen and (max-width: 1200px){
.logo-bar{
display: none;
}
.mobile-menu{
display: block;
box-shadow: 0 0 5px 0;
}
.mobile-menu-1{
padding: 0 0 0 50px;
}
label{
display: block;
pointer: cursor;
}
#menu ul li{
display: none;
width: 100%;
text-align: center;
}
#menu ul li a{
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked + #menu ul{
display: block;
}
}
<html>
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<!-- Marquee Starts -->
<div class="marquee">
<marquee behavior="scroll" scrollamount="4" direction="left" class="marqueeStyle" onmouseover="this.stop();" onmouseout="this.start();">
<i class="fas fa-newspaper"></i> University will remain closed upto 30th May 2020 to avoid gathering & prevention of spreading Novel Corona Virus
</marquee>
</div>
<!-- Marquee Ends-->
<!-- Logo Bar Starts -->
<header class="header">
<div id="logo-bar">
<div class="container">
<div class="logo-bar">
<div class="row">
<div class="logo col-lg-6 col-md-6">
<h1>Navbar</h1>
</div>
<div class="logo-2 col-lg-3 col-md-3">
<h1>Second Navbar</h1>
</div>
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
<div class="menu-sidebar col-lg-3 col-md-3">
<button class="btn btn-sm btn-primary">Student Login</button> <button class="btn btn-sm btn-primary">Admin Login</button>
<h6><strong>Call Us:</strong> +91-360-2277560</h6>
<h6><Strong>Email Us:</Strong></h6>
<h6>info#theglobaluniversity.co.in</h6>
</div>
</div>
</div>
</div>
</div>
<div class="mobile-menu">
<div class="row">
<div class="mobile-menu-1 col-10 d-flex my-auto">
<h1>Navbar</h1>
</div>
<div class="mobile-menu-2 col-2 d-flex my-auto">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle" />
</div>
</div>
</div>
<!-- Logo Bar Ends -->
<!-- Menu Bar Starts -->
<div id="menu">
<div class="container">
<ul>
<li><i class="fas fa-home"></i> </li>
<li class="nav-item">About Us
<ul>
<li class="nav-sub-item">About TGU</li>
<li class="nav-sub-item">TGU Vision</li>
<li class="nav-sub-item">TGU Mission</li>
<li class="nav-sub-item">Board of Mgt.</li>
<li class="nav-sub-item">Approval & Affiliation</li>
</ul>
</li>
<li class="nav-item">Academic
<ul>
<li class="nav-sub-item">Courses</li>
<li class="nav-sub-item">Department</li>
<li class="nav-sub-item">Syllabus</li>
</ul>
</li>
<li class="nav-item">Admission
<ul>
<li class="nav-sub-item">Procedure</li>
<li class="nav-sub-item">Apply Online</li>
<li class="nav-sub-item">Scholarship</li>
<li class="nav-sub-item">Download Form</li>
<li class="nav-sub-item">Merit</li>
</ul>
</li>
<li class="exam.html">Examination
<ul>
<li class="nav-sub-item">Exam Form</li>
<li class="nav-sub-item">Exam Notice</li>
<li class="nav-sub-item">Admit Card</li>
<li class="nav-sub-item">Verification</li>
</ul>
</li>
<li class="research.html">Research</li>
<li class="facilities.html">Facilities
<ul>
<li class="nav-sub-item">Library</li>
<li class="nav-sub-item">WiFi Campus</li>
<li class="nav-sub-item">Hostel & Cafe</li>
<li class="nav-sub-item">Digitalization</li>
<li class="nav-sub-item">First Aid</li>
<li class="nav-sub-item">Sports</li>
</ul>
</li>
<li>Contact</li>
<li>
<div class="search_button"><i class="fa fa-search" aria-hidden="true"></i></div>
</li>
</ul>
</div>
</div>
</header>
</body>
</html>

How to change size of prices without disrupting the menu?

I've been trying to get the size of the prices to change, but whenever I do it goes on top of the dotted line instead of staying above it.
//hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');
//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
$(this).addClass('selected');
$('.page').hide();
$($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
window.scrollTo(0, 0); //scroll to the top of the page
});
body {
background: #e6e6e6;
font-family: "Open Sans", Sans Serif;
font-weight: 300;
color: #febd44;
margin: 0px;
}
ul,
li {
list-style-type: none;
}
ul li {
display: inline-block;
box-sizing: border-box;
text-align: left;
}
.main-button {
display: inline-block;
width: 79px;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-size: 16px;
}
.main-button:hover {
background: rgba(255, 255, 255, 0.1);
transition: 0.7s;
cursor: pointer;
}
h3 {
text-align: center;
font-size: 44px;
}
.container {
box-sizing: border-box;
margin: auto;
max-width: 70%;
padding: 20px;
}
.button {
background: rgb(0, 163, 222);
display: inline-block;
width: 130px;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
}
.button:hover {
background: rgb(0, 105, 242);
transition: 0.25s;
color: white;
cursor: pointer;
}
a {
color: #febd44;
text-decoration: none;
}
a:hover {
color: white;
transition: 0.5s;
}
.content1 {
background: rgba(255, 255, 255, 0.15);
}
.content2 {
background: rgba(255, 255, 255, 0.1);
}
.li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
}
strong {
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -.3em;
left: 0;
}
em {
padding: 0 0 0 5px;
font: 28px "Times New Roman", Sans-serif;
}
sup {
font-size: 15px;
margin-left: 3px;
}
.price {
position: relative;
top: .9em;
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<h1>Silver Spoon</h1>
</li>
<a class='page-button' data-page_num='1' href='javascript:voide(0)'>
<li class="main-button home-button">Home</li>
</a>
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<li class="main-button about-button">Menu</li>
</a>
</ul>
</div>
<div class="page">
<div id="Home">
<div class="content1">
<div class="container">
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<h3>Menu</h3>
</a>
<h4>Now introducing edible food.</h4>
<p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
</div>
</div>
</div>
</div>
<div class="page">
<div id="Menu">
<div class="content1">
<div class="container">
<h3>Bakery</h3>
<li class="li"><strong>Cheese Danish</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chocolate Chip Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Glazed Donuts</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Everything Bagels</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Plain Bagels</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Hot Breakfast</h3>
<li class="li"><strong>Egg Sandwich</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sausage Sandwich</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Egg Bites</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Egg Wraps</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Old-Fashioned Oatmeal</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content1">
<div class="container">
<h3>Sandwiches</h3>
<li class="li"><strong>Chicken Caprese</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sandwich</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Hamburger</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ham & Swiss Panini</strong>
<div class="price"><em>3</em><sup>00</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Deserts</h3>
<li class="li"><strong>Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Cake</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ice Cream</strong>
<div class="price"><em>1</em><sup>99</sup></div>
</li>
</div>
</div>
I tried to mess with the padding and margin, but it didn't change anything for me.
I just want to change the size of the prices while staying above the dotted lines

Just set the hight of .li explicitly, and also the size of .price em (that's the font size of the price).
//hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');
//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
$(this).addClass('selected');
$('.page').hide();
$($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
window.scrollTo(0, 0); //scroll to the top of the page
});
body {
background: #e6e6e6;
font-family: "Open Sans", Sans Serif;
font-weight: 300;
color: #febd44;
margin: 0px;
}
ul,
li {
list-style-type: none;
}
ul li {
display: inline-block;
box-sizing: border-box;
text-align: left;
}
.main-button {
display: inline-block;
width: 79px;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-size: 16px;
}
.main-button:hover {
background: rgba(255, 255, 255, 0.1);
transition: 0.7s;
cursor: pointer;
}
h3 {
text-align: center;
font-size: 44px;
}
.container {
box-sizing: border-box;
margin: auto;
max-width: 70%;
padding: 20px;
}
.button {
background: rgb(0, 163, 222);
display: inline-block;
width: 130px;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
}
.button:hover {
background: rgb(0, 105, 242);
transition: 0.25s;
color: white;
cursor: pointer;
}
a {
color: #febd44;
text-decoration: none;
}
a:hover {
color: white;
transition: 0.5s;
}
.content1 {
background: rgba(255, 255, 255, 0.15);
}
.content2 {
background: rgba(255, 255, 255, 0.1);
}
.li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
/* set the height of the li explicitly */
height: 20px;
}
strong {
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -.3em;
left: 0;
}
em {
padding: 0 0 0 5px;
font: 28px "Times New Roman", Sans-serif;
}
sup {
font-size: 15px;
margin-left: 3px;
}
.price {
position: relative;
float: right;
}
/* set the size of .price em */
.price em {
font-size: 50px;
}
/* set the size of .price sup */
.price sup {
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<h1>Silver Spoon</h1>
</li>
<a class='page-button' data-page_num='1' href='javascript:voide(0)'>
<li class="main-button home-button">Home</li>
</a>
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<li class="main-button about-button">Menu</li>
</a>
</ul>
</div>
<div class="page">
<div id="Home">
<div class="content1">
<div class="container">
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<h3>Menu</h3>
</a>
<h4>Now introducing edible food.</h4>
<p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
</div>
</div>
</div>
</div>
<div class="page">
<div id="Menu">
<div class="content1">
<div class="container">
<h3>Bakery</h3>
<li class="li"><strong>Cheese Danish</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chocolate Chip Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Glazed Donuts</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Everything Bagels</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Plain Bagels</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Hot Breakfast</h3>
<li class="li"><strong>Egg Sandwich</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sausage Sandwich</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Egg Bites</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Egg Wraps</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Old-Fashioned Oatmeal</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content1">
<div class="container">
<h3>Sandwiches</h3>
<li class="li"><strong>Chicken Caprese</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sandwich</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Hamburger</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ham & Swiss Panini</strong>
<div class="price"><em>3</em><sup>00</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Deserts</h3>
<li class="li"><strong>Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Cake</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ice Cream</strong>
<div class="price"><em>1</em><sup>99</sup></div>
</li>
</div>
</div>
But I think it would be much better to use flexbox for this, and then you can set the font-size to whatever value you want, and don't have to worry about not displaying right:
body {
background: pink;
}
.menu-list {
list-style-type: disc;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
.menu-list .li {
margin: auto;
background: white;
display: flex;
width: 80%;
/* 'justify-content: space-between;' does the trick of
separating the two items in the li */
justify-content: space-between;
border-bottom: 1px dotted red;
}
.menu-list .li .title,
.menu-list .li .price {
display: flex;
}
.menu-list .li .title {
font-size: 18px;
align-self: flex-end;
}
.menu-list .li .price {
font-size: 30px;
}
<ul class="menu-list">
<li class="li"><span class="title">Food 1</span><span class="price">3<sup>50</sup></span></li>
<li class="li"><span class="title">Food 2</span><span class="price">5<sup>50</sup></span></li>
<li class="li"><span class="title">Food 3</span><span class="price">4<sup>00</sup></span></li>
</ul>

change megamenu from click event to hover

I have a megamenu and I want to change the click event to hover event. When you hover the "All Categories" to be able to display the submenu.
For now the example is working only for click. You have to click the "All Categories" to display all the categories.
I have tried to change the event:
$('.categorie-title').hover(function () {
$('.vertical-menu-list').slideToggle();
});
but when you go with the mouse on a category ex: "IT" all the megamenu is closing.
How can i make the megamenu work from click to hover ?
$(document).ready(function() {
$('.categorie-title').on('click', function () {
$('.vertical-menu-list').slideToggle();
});
});
li {
list-style: none;
}
.vertical-menu {
width: 100%;
position: relative;
}
.vertical-menu > span {
background: #03A9F4 none repeat scroll 0 0;
color: #fff;
cursor: pointer;
display: block;
font-size: 15px;
font-weight: 500;
margin: 0;
padding: 14px 30px 12px;
position: relative;
text-transform: uppercase;
height: 49px;
}
.vertical-menu > span::after, .search-box-view .submit::before {
content: "";
font-family: FontAwesome;
font-size: 18px;
font-weight: normal;
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
}
.has-mega-menu {
line-height: 43px;
float: left;
padding: 0;
background-color: #3e3e3e;
width: 220px;
}
.vertical-menu-list {
background: #fff none repeat scroll 0 0;
left: 0;
padding: 0 25px;
position: absolute;
top: 100%;
width: 100%;
z-index: 999;
border: 2px solid #03A9F4;
border-top-width: 0;
}
.vertical-menu-list > li {
position: relative;
}
.vertical-menu-list > li > a, .category-menu li a {
color: #333;
display: block;
font-size: 14px;
font-weight: 400;
line-height: 19px;
overflow-wrap: break-word;
padding: 17px 0;
position: relative;
text-align: left;
text-transform: capitalize;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.vertical-menu-list > li span, .category-sub li span {
display: inline-block;
width: 35px;
}
.vertical-menu-list > li:hover ul.ht-dropdown {
visibility: visible;
-webkiit-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
.vertical-menu-list > li ul.megamenu {
background: #fff none repeat scroll 0 0;
border: 1px solid #e5e5e3;
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
left: 100%;
padding: 10px;
top: 0;
width: 905px;
}
.vertical-menu-list .ht-dropdown:before {
background-color: #fff;
border-color: #f1f1f1 transparent transparent #f1f1f1;
-o-border-image: none;
border-image: none;
border-style: solid;
border-width: 1px;
content: "";
display: block;
height: 15px;
left: -8px;
position: absolute;
top: 21px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 15px;
}
.vertical-menu-list > li:nth-child(n) > a:after {
content: "\f107";
font-family: 'FontAwesome';
position: absolute;
top: 20px;
right: 15px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.vertical-menu-list > li:nth-child(n):hover > a:after {
-wekit-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.has-mega-menu a:hover {
color: #03A9F4;
white-space: normal;
text-decoration: none;
}
.fix {
overflow: hidden;
}
.ht-dropdown {
background: #fff;
left: 0;
opacity: 0;
padding: 10px 20px;
position: absolute;
top: 100%;
-webkiit-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 0 0 0;
transform-origin: 0 0 0;
width: 150px;
text-align: left;
visibility: hidden;
z-index: 99999999;
-webkit-transition: 0.5s;
transition: 0.5s;
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}
.sub-menu.mega-menu {
left: 100%;
padding: 0;
top: 0;
background-color: #ffffff;
}
.sub-menu.mega-menu .row .mega-col {
display: inline-block;
position: relative;
vertical-align: top;
width: 20%;
height: 100%;
overflow: hidden;
}
.sub-menu.mega-menu .mega-content:last-child {
border: medium none;
margin-bottom: 0;
padding-bottom: 0;
}
.sub-menu.mega-menu .mega-item-title {
font-size: 13px;
font-family: sans-serif;
text-align: left;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
ul.menu {
float: left;
}
.megamenu ul {
position: relative;
margin: 0;
padding: 0 15px;
}
.has-mega-menu ul.menu > li.menu-item {
width: 100%;
float: none;
text-align: left;
padding: 0 0 0 10px;
}
.main-menu ul li a, .megamenu ul li a {
display: block;
line-height: 1.5;
font-size: 12px;
}
.menu-hidden {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 hidden-xs">
<div class="vertical-menu">
<span class="categorie-title">All Categories </span>
<nav class="has-mega-menu">
<ul class="vertical-menu-list menu-hidden">
<li>
<a class="" href="javascript:void(0)"><span><i class="fa fa-leaf"></i></span>IT</a>
<ul class="ht-dropdown megamenu">
<li class="megamenu-three-column fix">
<div class="sub-menu mega-menu">
<div class="row">
<ul class="mega-col"><li class="mega-content">
Components
<ul class="menu">
<li class="menu-item">Motherboards</li>
<li class="menu-item">Memories</li>
</ul>
</ul>
<ul class="mega-col"><li class="mega-content">
Software
<ul class="menu">
<li class="menu-item">Windows</li>
<li class="menu-item">Office</li>
</ul>
</ul>
</div>
</div>
</ul>
</li>
<li>
<a class="" href="javascript:void(0)"><span><i class="fa fa-black-tie"></i></span>Fashion</a>
<ul class="ht-dropdown megamenu">
<li class="megamenu-three-column fix">
<div class="sub-menu mega-menu">
<div class="row">
<ul class="mega-col"><li class="mega-content">
Shoes
<ul class="menu">
<li class="menu-item">Some Shoes</li>
<li class="menu-item">Another Shoes</li>
</ul>
</ul>
<ul class="mega-col"><li class="mega-content">
Dresses
<ul class="menu">
<li class="menu-item">Dresses 1</li>
<li class="menu-item">Dresses 2</li>
<li class="menu-item">Dresses 3</li>
</ul>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

You can add mouseenter and mouseleave as per below to act like hover
$(document).ready(function() {
$('.categorie-title').on('mouseenter', function () {
$('.vertical-menu-list').slideDown();
});
$('.vertical-menu').on('mouseleave', function () {
$('.vertical-menu-list').slideUp();
});
});
li {
list-style: none;
}
.vertical-menu {
width: 100%;
position: relative;
}
.vertical-menu > span {
background: #03A9F4 none repeat scroll 0 0;
color: #fff;
cursor: pointer;
display: block;
font-size: 15px;
font-weight: 500;
margin: 0;
padding: 14px 30px 12px;
position: relative;
text-transform: uppercase;
height: 49px;
}
.vertical-menu > span::after, .search-box-view .submit::before {
content: "";
font-family: FontAwesome;
font-size: 18px;
font-weight: normal;
position: absolute;
right: 13px;
top: 50%;
transform: translateY(-50%);
}
.has-mega-menu {
line-height: 43px;
float: left;
padding: 0;
background-color: #3e3e3e;
width: 220px;
}
.vertical-menu-list {
background: #fff none repeat scroll 0 0;
left: 0;
padding: 0 25px;
position: absolute;
top: 100%;
width: 100%;
z-index: 999;
border: 2px solid #03A9F4;
border-top-width: 0;
}
.vertical-menu-list > li {
position: relative;
}
.vertical-menu-list > li > a, .category-menu li a {
color: #333;
display: block;
font-size: 14px;
font-weight: 400;
line-height: 19px;
overflow-wrap: break-word;
padding: 17px 0;
position: relative;
text-align: left;
text-transform: capitalize;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.vertical-menu-list > li span, .category-sub li span {
display: inline-block;
width: 35px;
}
.vertical-menu-list > li:hover ul.ht-dropdown {
visibility: visible;
-webkiit-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
opacity: 1;
}
.vertical-menu-list > li ul.megamenu {
background: #fff none repeat scroll 0 0;
border: 1px solid #e5e5e3;
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
left: 100%;
padding: 10px;
top: 0;
width: 905px;
}
.vertical-menu-list .ht-dropdown:before {
background-color: #fff;
border-color: #f1f1f1 transparent transparent #f1f1f1;
-o-border-image: none;
border-image: none;
border-style: solid;
border-width: 1px;
content: "";
display: block;
height: 15px;
left: -8px;
position: absolute;
top: 21px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
width: 15px;
}
.vertical-menu-list > li:nth-child(n) > a:after {
content: "\f107";
font-family: 'FontAwesome';
position: absolute;
top: 20px;
right: 15px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.vertical-menu-list > li:nth-child(n):hover > a:after {
-wekit-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.has-mega-menu a:hover {
color: #03A9F4;
white-space: normal;
text-decoration: none;
}
.fix {
overflow: hidden;
}
.ht-dropdown {
background: #fff;
left: 0;
opacity: 0;
padding: 10px 20px;
position: absolute;
top: 100%;
-webkiit-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 0 0 0;
transform-origin: 0 0 0;
width: 150px;
text-align: left;
visibility: hidden;
z-index: 99999999;
-webkit-transition: 0.5s;
transition: 0.5s;
-webkit-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
-ms-box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
}
.sub-menu.mega-menu {
left: 100%;
padding: 0;
top: 0;
background-color: #ffffff;
}
.sub-menu.mega-menu .row .mega-col {
display: inline-block;
position: relative;
vertical-align: top;
width: 20%;
height: 100%;
overflow: hidden;
}
.sub-menu.mega-menu .mega-content:last-child {
border: medium none;
margin-bottom: 0;
padding-bottom: 0;
}
.sub-menu.mega-menu .mega-item-title {
font-size: 13px;
font-family: sans-serif;
text-align: left;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
}
ul.menu {
float: left;
}
.megamenu ul {
position: relative;
margin: 0;
padding: 0 15px;
}
.has-mega-menu ul.menu > li.menu-item {
width: 100%;
float: none;
text-align: left;
padding: 0 0 0 10px;
}
.main-menu ul li a, .megamenu ul li a {
display: block;
line-height: 1.5;
font-size: 12px;
}
.menu-hidden {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 hidden-xs">
<div class="vertical-menu">
<span class="categorie-title">All Categories </span>
<nav class="has-mega-menu">
<ul class="vertical-menu-list menu-hidden">
<li>
<a class="" href="javascript:void(0)"><span><i class="fa fa-leaf"></i></span>IT</a>
<ul class="ht-dropdown megamenu">
<li class="megamenu-three-column fix">
<div class="sub-menu mega-menu">
<div class="row">
<ul class="mega-col"><li class="mega-content">
Components
<ul class="menu">
<li class="menu-item">Motherboards</li>
<li class="menu-item">Memories</li>
</ul>
</ul>
<ul class="mega-col"><li class="mega-content">
Software
<ul class="menu">
<li class="menu-item">Windows</li>
<li class="menu-item">Office</li>
</ul>
</ul>
</div>
</div>
</ul>
</li>
<li>
<a class="" href="javascript:void(0)"><span><i class="fa fa-black-tie"></i></span>Fashion</a>
<ul class="ht-dropdown megamenu">
<li class="megamenu-three-column fix">
<div class="sub-menu mega-menu">
<div class="row">
<ul class="mega-col"><li class="mega-content">
Shoes
<ul class="menu">
<li class="menu-item">Some Shoes</li>
<li class="menu-item">Another Shoes</li>
</ul>
</ul>
<ul class="mega-col"><li class="mega-content">
Dresses
<ul class="menu">
<li class="menu-item">Dresses 1</li>
<li class="menu-item">Dresses 2</li>
<li class="menu-item">Dresses 3</li>
</ul>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Well, it required that you modify the javascript source of the menu.
So it should look something like this.
<div class="container">
<div class="main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li> Products
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet
</li>
<li>Snoopydoo
</li>
<li>Fallen Angel
</li>
<li>Sui Maker
</li>
<li>Wave Master
</li>
<li>Golf Pro
</li>
</ul>
</div>
<div>
<h4>Utilities</h4>
<ul>
<li>Gadget Finder
</li>
<li>Green Tree Express
</li>
<li>Green Tree Pro
</li>
<li>Wobbler 3.0
</li>
<li>Coolkid
</li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li>Learn Thai
</li>
<li>Math Genius
</li>
<li>Chemokid
</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0
</li>
<li>Moneymaker
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
<li> Downloads
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Education & Learning</h4>
<ul>
<li>Learn Thai
</li>
<li>Math Genius
</li>
<li>Chemokid
</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0
</li>
<li>Moneymaker
</li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li>Gadget Finder
</li>
<li>Green Tree Express
</li>
<li>Green Tree Pro
</li>
<li>Holy Cannoli
</li>
<li>Wobbler 3.0
</li>
<li>Coolkid
</li>
</ul>
</div>
<div>
<h4>Games</h4>
<ul>
<li>Catch the Bullet
</li>
<li>Snoopydoo
</li>
<li>Fallen Angel
</li>
<li>Sui Maker
</li>
<li>Wave Master
</li>
<li>Golf Pro
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
<li> Applications
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet
</li>
<li>Snoopydoo
</li>
</ul>
<h4>Utilities</h4>
<ul>
<li>Gadget Finder
</li>
<li>Green Tree Express
</li>
<li>Green Tree Pro
</li>
<li>Wobbler 3.0
</li>
<li>Coolkid
</li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li>Learn Thai
</li>
<li>Math Genius
</li>
<li>Chemokid
</li>
</ul>
<h4>Professionals</h4>
<ul>
<li>Success 1.0
</li>
<li>Moneymaker
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
<li> Projects
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet
</li>
<li>Snoopydoo
</li>
<li>Fallen Angel
</li>
<li>Sui Maker
</li>
<li>Wave Master
</li>
<li>Golf Pro
</li>
</ul>
<h4>Utilities</h4>
<ul>
<li>Gadget Finder
</li>
<li>Green Tree Express
</li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li>Gadget Finder
</li>
<li>Green Tree Express
</li>
<li>Green Tree Pro
</li>
<li>Holy Cannoli
</li>
<li>Wobbler 3.0
</li>
<li>Coolkid
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
<li> Freeware
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Utilities</h4>
<ul>
<li>Green Tree Pro
</li>
<li>Wobbler 3.0
</li>
<li>Coolkid
</li>
</ul>
<h4>Education</h4>
<ul>
<li>Learn Thai
</li>
<li>Math Genius
</li>
<li>Chemokid
</li>
</ul>
</div>
<div>
<h4>Professionals</h4>
<ul>
<li>Success 1.0
</li>
<li>Moneymaker
</li>
</ul>
</div>
<div>
<h4>Learning & Games</h4>
<ul>
<li>Catch the Bullet
</li>
<li>Snoopydoo
</li>
<li>Fallen Angel
</li>
<li>Sui Maker
</li>
<li>Wave Master
</li>
<li>Golf Pro
</li>
</ul>
</div>
</div>
<!-- /cbp-hrsub-inner -->
</div>
<!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>
and the code after beautifying and changes
var cbpHorizontalMenu = (function () {
var b = $("#cbp-hrmenu > ul > li"),
g = b.children("a"),
c = $("body"),
d = -1;
function f() {
g.on("mouseover", a);
b.on("mouseover", function (h) {
h.stopPropagation()
})
}
function a(j) {
if (d !== -1) {
b.eq(d).removeClass("cbp-hropen")
}
var i = $(j.currentTarget).parent("li"),
h = i.index();
if (d === h) {
i.removeClass("cbp-hropen");
d = -1
} else {
i.addClass("cbp-hropen");
d = h;
c.off("click").on("click", e)
}
return false
}
function e(h) {
b.eq(d).removeClass("cbp-hropen");
d = -1
}
return {
init: f
}
})();
$(function () {
cbpHorizontalMenu.init();
});
on jsfiddle

Categories