We Keep Coding

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

auto showing and hiding navigation bar

Hi I'm trying to implement a auto show and hide navigation menu. I'm not sure how I would implement this idea. The idea I'm wanting is so the navbar slips away out of site above the website and when the cursor hovers over the top the nav bar appears. (A better example is (if you own a Mac) the idea comes from the Dock when auto hidden).
Would I use a .CSS transition or a JQuery/Javascript to implement this.
Heres the navbar I'm working with,
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
overflow: hidden;
background-color: #a137a7;
font-family:'Source Sans Pro', sans-serif;
opacity: .8;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family:'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family:'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
<nav>
<ul>
<li><a href="/"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png"></a></li>
<li><a href=/""a target="_blank"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png"></a></li>
<li><a href="/"><img class="blog"
src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png"></a></li>
<li><a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png"></a></li>
<li style="float:right"><a href="/"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png"></a></li>
<li style="float:right"><img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png"></li>
<li style="float:right"><a href="/"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png"></a></li>
<li style="float:right"><a href="/""a target="_blank"><img class="img-responsive2"
src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png"></a></li>
</ul>
</nav>
<body>

I would use the nav to slide up and down. See my code:
I've added a red border to the nav, so you can see it (for demo).
$(function() {
$('.hover').on('mouseenter mouseleave', function() {
$('nav').toggleClass('toggleNav');
});
});
* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
position: absolute;
top: -100px;
left: 0;
right: 0;
border: 1px solid red;
height: 175px;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
nav:hover, nav.toggleNav {
top: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a137a7;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family: 'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
.hover {
width: 50px;
height: 50px;
background: lightblue;
margin-top: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
</a>
</li>
<li>
<a href="/" target="_blank">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png" />
</a>
</li>
<li>
<a href="/">
<img class="blog" src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png" />
</a>
</li>
<li>
<a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/" target="_blank ">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png " />
</a>
</li>
/
</ul>
</nav>
<div class="hover">Hover here</div>

This Is An Example Of Your Requirement Please Try Once
function myFunction(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("demo").innerHTML = coor;
if(y<=50){
document.getElementById("navBar").style.display = 'block';
}
else{
document.getElementById("navBar").style.display = 'none';
}
}
function clearCoor() {
document.getElementById("demo").innerHTML = "";
}
div {
width: 100%;
height: 300px;
border: 1px solid black;
}
.nav{
width:100%;
height:50px;
background:#00ffff;
display:none;
}
<div onmousemove="myFunction(event)" onmouseout="clearCoor()">
<div class="nav" id="navBar"></div>
</div>
<p id="demo"></p>

* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
position: absolute;
top: -100px;
left: 0;
right: 0;
border: 1px solid red;
height: 175px;
-webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out;
}
nav:hover {
top: 0px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #a137a7;
font-family: 'Source Sans Pro', sans-serif;
opacity: .8;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */
li a:hover {
background-color: #732878;
}
.footer {
color: #fff;
clear: both;
margin: 0em 0em 0em 0em;
padding: 0.70em 0.75em;
background: #000;
font-family: 'Source Sans Pro', sans-serif;
top: 490px;
border-top: 1px solid #000;
opacity: .7;
}
<nav>
<ul>
<li>
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
</a>
</li>
<li>
<a href="/" target="_blank">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/liGockmkp/twitter-256.png" />
</a>
</li>
<li>
<a href="/">
<img class="blog" src="http://static.tumblr.com/e2rgcy1/i0Nocny7l/blog-icon.png" />
</a>
</li>
<li>
<a href="/" onclick="window.open(this.href, 'mywin',
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/vHdockmf2/tinychaticon.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/4Yxocknow/refresh.png" />
</a>
</li>
<li style="float:right">
<a href="/">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/HPzod3sz1/pop-out-icon.png" />
</a>
</li>
<li style="float:right">
<a href="/" target="_blank ">
<img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/nz3ocovr0/tumblr-follow-icon.png " />
</a>
</li>
/
</ul>
</nav>
<body>

Input box wrong positioning in menu

I tried to add an input box to the most right side of the bar on the same line as those menu bars, but everytime its positioned bad or its not even there. Can you help me with this? It needs to be in the menu bar because of my JS hide-on-scroll function. I'm trying to use JQuery-ui's
DatePicker ("$(function() {
$("#datepicker").datepicker();
});")
HTML:
<nav>
<span class="nadpis"><?php echo $id_dom; ?></span>
<p>Date: <input type="text" id="datepicker"></p></span>
<ul class="nav">
<li class="prve">
PSI
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li><!--
--><li class="druhe">
☰
<ul>
<li>
RPO
</li>
<li>
FLV
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
</ul>
</li>
<li>
FLC
<ul>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
</ul>
</li>
<li>
QUA
<ul>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li>
<li>
HFX
</li>
<li>
PDT
</li>
<li>
RSH
</li>
<li>
BUR
</li>
<li>
SUHRN
</li>
<li>
INCI
</li>
<li>
JIRA
</li>
<li>
CHGT
</li>
<li>
TASK
</li>
<li>
VRS
</li>
</ul>
</li>
</ul>
</nav>
CSS:
nav {
display: inline-block;
position: fixed;
width: 100%;
text-align: center;
background-color: #303036;
vertical-align: top;
top: -1px;
opacity: 1;
transition: .3s;
}
nav:hover {
opacity: 1 !important;
transition: .3s;
}
/*Nadpis - nazov domainu/reportu */
span.nadpis a{
left: 0;
position: absolute;
text-decoration: none;
color: #FAFAC1;
background-color: #303036;
font-family: 'Helvetica Neue',sans-serif;
font-size: 30px;
font-weight: 700;
}
.nav a {
display: block;
background-color: #303036;
color: #fff;
text-decoration: none;
padding: .7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}
.nav {
vertical-align: top;
display: inline-block;
width: 250px;
}
.nav li {
position: relative;
}
.nav > li {
display: inline-block;
}
.nav li:hover > a {
transition: .3s;
background-color: #2e86ab;
color: #8fc93a;
}
.nav ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
border: 2px solid #81D4FA;
border-top: 1px solid #81D4FA;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
top: -1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
/* Prvy menu bar*/
.prve {
min-width: 100px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
/* Druhy menu bar */
.druhe {
min-width: 110px;
border-right: 2px solid #81D4FA;
}
.tretie {
right: 0;
}

check this fiddle. what i did was, made your nav display as block. and centered it with margin:auto. then added the text bar next to it. made it float and with margin-top i moved it up so it's in right place.
<body>
<!--MENU BAR!-->
<nav>
<span class="nadpis"><?php echo $id_dom; ?></span>
<ul class="nav">
<li class="prve">
PSI
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li><!--
--><li class="druhe">
☰
<ul>
<li>
RPO
</li>
<li>
FLV
<ul>
<li>
Simoncik
</li>
<li>
Kodrla
</li>
<li>
Vajs
</li>
<li>
Hrebicek
</li>
</ul>
</li>
<li>
FLC
<ul>
<li>
Bednarikova
</li>
<li>
Dobrikova
</li>
<li>
Duracka
</li>
</ul>
</li>
<li>
QUA
<ul>
<li>
Klco
</li>
<li>
Cisar
</li>
</ul>
</li>
<li>
HFX
</li>
<li>
PDT
</li>
<li>
RSH
</li>
<li>
BUR
</li>
<li>
SUHRN
</li>
<li>
INCI
</li>
<li>
JIRA
</li>
<li>
CHGT
</li>
<li>
TASK
</li>
<li>
VRS
</li>
</ul>
</li>
</ul>
<input type="text" class="tib" />
</nav>
body,nav ul {
margin: 0;
padding: 0;
list-style: none;
}
/* menu*/
nav {
display: inline-block;
position: fixed;
width: 100%;
/* text-align: center; */
background-color: #303036;
vertical-align: top;
top: -1px;
opacity: 1;
transition: .3s;
}
nav ul > li > a{
text-align:center;
}
ul.nav{
margin:auto;
}
nav:hover {
opacity: 1 !important;
transition: .3s;
}
/*Nadpis - nazov domainu/reportu */
span.nadpis a{
left: 0;
position: absolute;
text-decoration: none;
color: #FAFAC1;
background-color: #303036;
font-family: 'Helvetica Neue',sans-serif;
font-size: 30px;
font-weight: 700;
}
.nav a {
display: block;
background-color: #303036;
color: #fff;
text-decoration: none;
padding: .7em 1.7em;
text-transform: uppercase;
font-size: 85%;
letter-spacing: 3px;
position: relative;
}
.nav {
vertical-align: top;
/* display: inline-block; */
width: 250px;
}
.nav li {
position: relative;
}
.nav > li {
display: inline-block;
}
.nav li:hover > a {
transition: .3s;
background-color: #2e86ab;
color: #8fc93a;
}
.nav ul {
position: absolute;
white-space: nowrap;
z-index: 1;
left: -99999em;
border: 2px solid #81D4FA;
border-top: 1px solid #81D4FA;
}
.nav > li:hover > ul {
left: auto;
min-width: 100%;
}
.nav > li li:hover > ul {
left: 100%;
top: -1px;
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent;
right: 10px;
}
/* Prvy menu bar*/
.prve {
min-width: 100px;
border: 2px solid #81D4FA;
border-bottom: none;
border-top: none;
}
/* Druhy menu bar */
.druhe {
min-width: 110px;
border-right: 2px solid #81D4FA;
}
.tib{
float:right;
margin-top:-28px;
}

.fadeToggle changes my div's positions

I am trying to make a simple navigation menu that, when hovered over, will fade in a little colored square (div) above the item option that is being hovered. But when the items are hovered over the squares are not in the right position. I am pretty sure that if I changed the position to absolute it would fix it, but I need it to be on relative so they can maintain their location. Any help is appreciated, thank you very much.
CodePen
HTML:
<div id='navbar'>
<ul class='navmen'>
<a href='#' class='link'>
<li class='navitem' id='home'>HOME</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item2'>ITEM2</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item3'>ITEM3</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item4'>ITEM4</li>
</a>
</ul>
</div>
<ul class='navmen'>
<li class='itemam'>
<div class='divmen' id='divred'></div>
</li>
<li class='itemam'>
<div class='divmen' id='divorange'></div>
</li>
<li class='itemam'>
<div class='divmen' id='divblue'></div>
</li>
<li class='itemam'>
<div class='divmen' id='divgreen'></div>
</li>
</ul>
CSS:
.navmen {
display: inline;
position: relative;
left: 230px;
}
.link {
text-decoration: none;
color: black;
display: inline;
}
.navitem {
font-family: 'Pragati Narrow', sans-serif;
display: inline;
padding-left: 80px;
padding-right: 80px;
font-size: 22px;
}
.navitem:hover {
background-color: #CCCCCC;
}
.divmen {
background-color: black;
width: 210px;
height: 10px;
}
#divred {
background-color: red;
position: relative;
bottom: 77px;
left: 40px;
display: none;
}
#divorange {
background-color: orange;
position: relative;
left: 250px;
bottom: 107px;
display: none;
}
#divblue {
background-color: blue;
position: relative;
left: 460px;
bottom: 137px;
display: none;
}
#divgreen {
background-color: green;
position: relative;
bottom: 167px;
left: 670px;
display: none;
}
JavaScript:
$(document).ready(function() {
$('#home').hover(function() {
$('#divred').fadeToggle('slow')
})
});
$(document).ready(function() {
$('#item2').hover(function() {
$('#divorange').fadeToggle('slow')
})
});
$(document).ready(function() {
$('#item3').hover(function() {
$('#divblue').fadeToggle('slow')
})
});
$(document).ready(function() {
$('#item4').hover(function() {
$('#divgreen').fadeToggle('slow')
})
});

please check following code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#home').hover(function() {
$('#divred').fadeToggle('slow')
})
$('#item2').hover(function() {
$('#divorange').fadeToggle('slow')
})
$('#item3').hover(function() {
$('#divblue').fadeToggle('slow')
})
$('#item4').hover(function() {
$('#divgreen').fadeToggle('slow')
})
});
</script>
<style type="text/css">
.navmen {
display: inline;
position: relative;
left: 230px;
}
.link {
text-decoration: none;
color: black;
display: inline;
}
.navitem {
font-family: 'Pragati Narrow', sans-serif;
display: inline;
padding-left: 80px;
padding-right: 80px;
font-size: 22px;
}
.navitem:hover {
background-color: #CCCCCC;
}
.itemam{
height: 18px;
}
.divmen {
width: 210px;
display:none;
}
</style>
</head>
<body>
<div id='navbar'>
<ul class='navmen'>
<a href='#' class='link'>
<li class='navitem' id='home'>HOME</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item2'>ITEM2</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item3'>ITEM3</li>
</a>
<a href='#' class='link'>
<li class='navitem' id='item4'>ITEM4</li>
</a>
</ul>
</div>
<ul class='navmen'>
<li class='itemam'>
<div class='divmen' id='divred'>divred</div>
</li>
<li class='itemam'>
<div class='divmen' id='divorange'>divorange</div>
</li>
<li class='itemam'>
<div class='divmen' id='divblue'>divblue</div>
</li>
<li class='itemam'>
<div class='divmen' id='divgreen'>divgreen</div>
</li>
</ul>
</body>
</html>

I think you want something like this.
No JS/JQ required
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navmen {
margin-top: 25px;
list-style-type: none;
text-align: center;
}
.navitem {
font-family: 'Pragati Narrow', sans-serif;
display: inline-block;
border-top: 10px solid transparent;
transition: border .5s ease;
}
.navitem a {
text-decoration: none;
padding-left: 20px;
padding-right: 20px;
font-size: 22px;
display: block;
color: #000;
}
.navitem:hover a {
background: #ccc;
}
.red:hover {
border-top-color: red;
}
.green:hover {
border-top-color: green;
}
.blue:hover {
border-top-color: blue;
}
<div id="navbar">
<ul class="navmen">
<li class="navitem red" id="home">HOME
</li>
<li class="navitem green" id="item2">ITEM2
</li>
<li class="navitem blue" id="item3">ITEM3
</li>
</ul>
</div>