We Keep Coding

Convert hover custom Navbar to Click

Am a bit new to jQuery so please bear with me. I have this navbar menu that drops down on hover. Everything is working perfectly but my plan is to change the hover dropdown into a click and also hide the dropdowns when the outside html is clicked. I am not using any framework.
<ul class="tc-navigation">
<li class="active">
HOME
</li>
<li>
<a id="er">SERVICES</a>
<ul>
<li class="round"><a id="err">Transportation<i class="fa fa-angle-right"></i></a>
<ul>
<li class="round">Bus</li>
<li class="round">Taxi</li>
<li class="round">Air</li>
</ul>
</li>
<li class="round">Car Rental Agencies</li>
<li class="round">Driving Licence</li>
</ul>
</li>
<li>
<a id="er">ABOUT US</a>
<ul>
<li class="round">Who We are</li>
<li class="round">Our Vision</li>
<li class="round">Photo Gallery</li>
</ul>
</li>
<li class="round">CONTACT</li>
</ul>
CSS
.tc-navigation li>ul {
list-style: none;
margin: 0;
padding: 0;
top: 120%;
border-top: 2px solid;
border-radius: 0;
position: absolute;
width: 190px;
visibility: hidden;
opacity: 0;
background: #fff;
z-index: 10;
}
.tc-navigation li ul li {
float: none;
border-bottom: 1px solid #e1e1e1;
}
.tc-navigation li ul li:last-child {
border: 0;
}
.tc-navigation li ul li a {
width: 100%;
color: #444;
padding: 15px;
text-transform: capitalize;
text-align: center;
}
.tc-navigation li:hover>ul {
visibility: visible;
opacity: 1;
top: 100%;
}
.tc-navigation li ul li a:hover {
color: #fff;
}
.tc-navigation li ul li a:hover i {
color: #fff;
}
.tc-navigation li ul li a i {
color: #666;
position: absolute;
right: 10px;
top: 50%;
margin: -7px 0 0;
}
/* Sub Menu */
.tc-navigation li>ul li ul {
left: 110%;
top: 0!important;
}
.tc-navigation li ul li:hover>ul {
visibility: visible;
opacity: 1;
left: 100%;
}

You're currently using the :hover state in the CSS to set different rules for certain DOM elements. CSS doesn't directly respond to click events (except for the :active state for links and buttons, which doesn't really help you here); so the easiest way to convert that to click events would be to have those click events toggle a CSS class on the element, which can then be used in the CSS exactly the same way you're currently using :hover.
$('.tc-navigation > li').on("click", function(e) {
$(this).toggleClass('showSubmenu');
$(this).siblings().removeClass('showSubmenu'); // prevent two submenus from being "open" at the same time
return false; // keep the event from bubbling
});
// Hide menus when clicking outside them. Might be preferable
// to set this only when a submenu is opened, but for now
// I'mm just brute-forcing it on the entire page:
$(document).on('click', function(){
$('.tc-navigation > li').removeClass('showSubmenu')
});
#container {position:relative}
body {background-color:#CCC}
.tc-navigation li>ul {
list-style: none;
margin: 0;
padding: 0;
top: 120%;
border-top: 2px solid;
border-radius: 0;
position: absolute;
width: 190px;
visibility: hidden;
opacity: 0;
background: #fff;
z-index: 10;
}
.tc-navigation li ul li {
float: none;
border-bottom: 1px solid #e1e1e1;
}
.tc-navigation li ul li:last-child {
border: 0;
}
.tc-navigation li ul li a {
width: 100%;
color: #444;
padding: 15px;
text-transform: capitalize;
text-align: center;
}
/* Changing this selector from li:hover to li.showSubmenu; the rest of the CSS is as in the original: */
.tc-navigation li.showSubmenu>ul{
visibility: visible;
opacity: 1;
top: 100%;
}
.tc-navigation li ul li a:hover {
color: #fff;
}
.tc-navigation li ul li a:hover i {
color: #fff;
}
.tc-navigation li ul li a i {
color: #666;
position: absolute;
right: 10px;
top: 50%;
margin: -7px 0 0;
}
/* Sub Menu */
.tc-navigation li>ul li ul {
left: 110%;
top: 0!important;
}
.tc-navigation li ul li:hover>ul {
visibility: visible;
opacity: 1;
left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<ul class="tc-navigation">
<li class="active">
HOME
</li>
<li>
<a id="er">SERVICES</a>
<ul>
<li class="round"><a id="err">Transportation<i class="fa fa-angle-right"></i></a>
<ul>
<li class="round">Bus</li>
<li class="round">Taxi</li>
<li class="round">Air</li>
</ul>
</li>
<li class="round">Car Rental Agencies</li>
<li class="round">Driving License</li>
</ul>
</li>
<li>
<a id="er">ABOUT US</a>
<ul>
<li class="round">Who We are</li>
<li class="round">Our Vision</li>
<li class="round">Photo Gallery</li>
</ul>
</li>
<li class="round">CONTACT</li>
</ul>
</div>
(I had to add a container element to keep the submenus from falling offscreen; the positioning is still not quite right, I assume because your CSS depends on other page elements not shown here, but it's close enough to demonstrate the idea. Other than that the only change to your CSS was the one line where li:hover was changed to li.showSubmenu.)

Alright, Take a look on my menu
$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp(200);
} else {
element.addClass('open');
element.children('ul').slideDown(200);
element.siblings('li').children('ul').slideUp(200);
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp(200);
}
});
#import url(https://fonts.googleapis.com/css?family=Raleway:400,200);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu {
width: 220px;
font-family: Raleway, sans-serif;
color: #ffffff;
}
#cssmenu ul ul {
display: none;
}
#cssmenu > ul > li.active > ul {
display: block;
}
.align-right {
float: right;
}
#cssmenu > ul > li > a {
padding: 16px 22px;
cursor: pointer;
z-index: 2;
font-size: 16px;
text-decoration: none;
color: #ffffff;
background: #bb0e0e;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
position: absolute;
right: 26px;
top: 19px;
z-index: 5;
display: block;
height: 10px;
width: 2px;
background: #ffffff;
content: "";
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
position: absolute;
right: 22px;
top: 23px;
display: block;
width: 10px;
height: 2px;
background: #ffffff;
content: "";
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-ms-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu ul ul li a {
padding: 14px 22px;
cursor: pointer;
z-index: 2;
font-size: 14px;
text-decoration: none;
color: #ddd;
background: #49505a;
-webkit-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu ul ul ul li a {
padding-left: 32px;
}
#cssmenu ul ul li a:hover {
color: #fff;
}
#cssmenu ul ul > li.has-sub > a:after {
top: 16px;
right: 26px;
background: #ddd;
}
#cssmenu ul ul > li.has-sub > a:before {
top: 20px;
background: #ddd;
}
<html lang="ru" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div id="cssmenu">
<ul>
<li><i class="fa fa-fw fa-home"></i> Home</li>
<li class="has-sub"><i class="fa fa-fw fa-bars"></i> Services
<ul>
<li class="has-sub">Transportation
<ul>
<li>Bus</li>
<li>Taxi</li>
<li>Air</li>
</ul>
</li>
<li>Car Rental Agencies</li>
<li>Driving Licence</li>
</ul>
</li>
<li class="has-sub"><i class="fa fa-fw fa-cog"></i> Abut us
<ul>
<li>Who We are</li>
<li>Our Vision</li>
<li>Photo Gallery</li>
</ul>
</li>
<li><i class="fa fa-fw fa-phone"></i> Contact</li>
</ul>
</div>
</body>
</html>

CSS Follow Mouse Effect

How to create a mouse follow effect like in the picture that has an arrow, the arrow is the line mouse follower object, while the red box is the width where the effects takes place.

I think you are talking about this type of menu
#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
#cssmenu ul:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
display: inline-block;
padding: 0;
margin: 0;
}
#cssmenu.align-right ul li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu ul li a {
color: #434351;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #333333;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
height: 3px;
width: 0;
background: #434351;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#cssmenu ul li.last>a:after,
#cssmenu ul li:last-child>a:after {
display: none;
}
#cssmenu ul li.active a {
color: #434351;
}
#cssmenu ul li.active a:before {
width: 100%;
}
#cssmenu.align-right li.last>a:after,
#cssmenu.align-right li:last-child>a:after {
display: block;
}
#cssmenu.align-right li:first-child a:after {
display: none;
}
#media screen and (max-width: 768px) {
#cssmenu ul li {
float: none;
display: block;
}
#cssmenu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #fb998c;
}
#cssmenu ul li.last>a,
#cssmenu ul li:last-child>a {
border: 0;
}
#cssmenu ul li a:after {
display: none;
}
#cssmenu ul li a:before {
display: none;
}
}
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Navigation Menu Width Size, Fixed Menu on Top

I'm new on CSS and I'm following a tutorial on making a responsive menu for my site. I was able to make it work except for a few things: the navigation menu shrinks both on desktop and mobile view. Everything is working except for the size. Also, the navigation menu won't stay on the top page whenever I edit the display, position, and z-line elements. Below are the codes for the CSS. Thank you for your help!
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2">
<div id='cssmenu'>
<ul>
<li><a href='#intro'>Home</a></li>
<li><a href='#features'>About Us</a></li>
<li class='active'><a href='#portfolio'>Products and Services</a>
<ul>
<li><a href='#portfolio'>Product 1 Support</a></li>
<li><a href='#portfolio'>Product 2</a></li>
<li><a href='#portfolio'>Product 3</a></li>
<li><a href='#portfolio'>Product 4</a></li>
<li><a href='#portfolio'>Product 5</a></li>
<li><a href='#portfolio'>Product 6</a></li>
</ul>
</li>
<li><a href='#team'>Team</a></li>
<li><a href='#responsive'>Testimonials</a></li>
<li><a href='#contact'>Get In Touch</a></li>
</ul>
</div>
</div>
</div>
</div>
CSS
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Varela Round, sans-serif;
background: #333333;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}
}

Use position fixed for sticky navigation
#cssmenu{ position:fixed; top:0; left:0; right:0; width:100%; }

Navbar's fixed position is not working

I've been searching for hours and simply cannot find an answer on why my navbar will not stay at the top with position fixed
here is my code: http://pastebin.com/eZnBuAEe
I am using animate.css and wow.js
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
<script>
( function( $ ) {
$( document ).ready(function() {
$('#cssmenu').prepend('<div id="menu-button">Menu</div>');
$('#cssmenu #menu-button').on('click', function(){
var menu = $(this).next('ul');
if (menu.hasClass('open')) {
menu.removeClass('open');
}
else {
menu.addClass('open');
}
});
});
} )( jQuery );
</script>
#navBar {
width: 100%;
position: fixed;
}
#nav {
box-shadow: 0px 0px 40px 5px black;
z-index: 3;
position: fixed;
width: 100%;
}
#cssmenu {
position: fixed;
margin-top: 0;
height: 60px;
background: #203F4F;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
width: 100%;
padding: 0;
line-height: 1;
display: block;
position: relative;
font-family: 'PT Sans', sans-serif;
}
#cssmenu #main {
width: 100%;
position: fixed;
margin-right: 0;
margin-left: 10%;
margin-top: 0px;
margin-bottom: 0px;
}
#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
#cssmenu ul:after,
#cssmenu:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
margin-top: 0;
padding: 0;
display: block;
position: relative;
}
#cssmenu ul li a {
text-decoration: none;
display: block;
margin-top: 0px;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li ul {
position: absolute;
left: -9999px;
top: auto;
}
#cssmenu ul li ul li {
max-height: 0;
position: absolute;
-webkit-transition: max-height 0.4s ease-out;
-moz-transition: max-height 0.4s ease-out;
-ms-transition: max-height 0.4s ease-out;
-o-transition: max-height 0.4s ease-out;
transition: max-height 0.4s ease-out;
background: #ffffff;
}
#cssmenu ul li ul li.has-sub:after {
display: block;
position: absolute;
content: "";
height: 10px;
width: 10px;
border-radius: 5px;
background: #000000;
z-index: 1;
top: 13px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
right: auto;
left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
display: block;
position: absolute;
content: "";
height: 0;
width: 0;
border: 3px solid transparent;
border-left-color: #ffffff;
z-index: 2;
top: 15px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
right: auto;
left: 15px;
border-left-color: transparent;
border-right-color: #ffffff;
}
#cssmenu #media{
margin-right: 15%;
font: 40px;
float: right;
}
#cssmenu ul li ul li a {
font-size: 14px;
font-weight: 400;
text-transform: none;
color: #000000;
letter-spacing: 0;
display: block;
width: 170px;
padding: 11px 10px 11px 20px;
}
#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {
color: #203F4F;
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
background: #203F4F;
}
#cssmenu ul li ul li:hover > ul {
left: 100%;
top: 0;
}
#cssmenu ul li ul li:hover > ul > li {
max-height: 72px;
position: relative;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul > li {
float: none;
display: inline-block;
}
#cssmenu.align-center > ul {
text-align: center;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul {
float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
}
#cssmenu.align-right ul ul li:hover > ul {
right: 100%;
left: auto;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu > ul > li:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 0;
top: 0;
z-index: 0;
background: #ffffff;
-webkit-transition: height .2s;
-moz-transition: height .2s;
-ms-transition: height .2s;
-o-transition: height .2s;
transition: height .2s;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 40px;
}
#cssmenu > ul > li.has-sub > a:after {
display: block;
content: "";
background: #ffffff;
height: 12px;
width: 12px;
position: absolute;
border-radius: 13px;
right: 14px;
top: 16px;
}
#cssmenu > ul > li.has-sub > a:before {
display: block;
content: "";
border: 4px solid transparent;
border-top-color: #203F4F;
z-index: 2;
height: 0;
width: 0;
position: absolute;
right: 16px;
top: 21px;
}
#cssmenu > ul > li > a {
color: #ffffff;
padding: 15px 20px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
z-index: 2;
position: relative;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
height: 100%;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: #000000;
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
background: #000000;
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
border-top-color: #ffffff;
}
#cssmenu > ul > li:hover > ul {
left: 0;
}
#cssmenu > ul > li:hover > ul > li {
max-height: 72px;
position: relative;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu > ul > li > a {
display: block;
}
#cssmenu > ul > li {
width: auto;
}
#cssmenu > ul > li > ul {
width: 170px;
display: block;
}
#cssmenu > ul > li > ul > li {
width: 170px;
display: block;
}
#media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu > ul {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-out;
-moz-transition: max-height 0.35s ease-out;
-ms-transition: max-height 0.35s ease-out;
-o-transition: max-height 0.35s ease-out;
transition: max-height 0.35s ease-out;
}
#cssmenu > ul > li > ul {
width: 100%;
display: block;
}
#cssmenu.align-right ul li a {
text-align: left;
}
#cssmenu > ul > li > ul > li {
width: 100%;
display: block;
}
#cssmenu.align-right ul ul li a {
text-align: left;
}
#cssmenu > ul > li > ul > li > a {
width: 100%;
display: block;
}
#cssmenu ul li ul li a {
width: 100%;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu.align-center > ul > li {
display: block;
}
#cssmenu > ul.open {
max-height: 1000px;
border-top: 1px solid rgba(110, 110, 110, 0.25);
}
#cssmenu ul {
width: 100%;
}
#cssmenu ul > li {
float: none;
width: 100%;
}
#cssmenu ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 12px 20px;
}
#cssmenu ul > li:after {
display: none;
}
#cssmenu ul li.has-sub > a:after,
#cssmenu ul li.has-sub > a:before,
#cssmenu ul li ul li.has-sub:after,
#cssmenu ul li ul li.has-sub:before {
display: none;
}
#cssmenu ul li ul,
#cssmenu ul li ul li ul,
#cssmenu ul li ul li:hover > ul,
#cssmenu.align-right ul li ul,
#cssmenu.align-right ul li ul li ul,
#cssmenu.align-right ul li ul li:hover > ul {
left: 0;
position: relative;
right: auto;
}
#cssmenu ul li ul li,
#cssmenu ul li:hover > ul > li {
max-height: 999px;
position: relative;
background: none;
}
#cssmenu ul li ul li a {
padding: 8px 20px 8px 35px;
color: #ffffff;
}
#cssmenu ul li ul ul li a {
padding: 8px 20px 8px 50px;
}
#cssmenu ul li ul li:hover > a {
color: #000000;
}
#cssmenu #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #ffffff;
cursor: pointer;
}
#cssmenu #menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
right: 20px;
top: 16px;
}
#cssmenu #menu-button:before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #ffffff;
right: 20px;
top: 26px;
}
}
<div id='navBar'><nav id='nav' class='wow fadeInDown animated' data-wow-delay="1s">
<div id='cssmenu'>
<ul id="media">
<li><a href='#'><span>Mystery Crocs</span></a></li>
</ul>
<ul id="main">
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>The Classics</span></a>
<ul>
<li><a href='#menFull'><span>Mens</span></a></li>
<li><a href='#womenFull'><span>Womens</span></a></li>
<li><a href='#girlsFull'><span>Girls</span></a></li>
<li class='last'><a href='#boysFull'><span>Boys</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Loafers</span></a>
<ul>
<li><a href='#'><span>Mens</span></a></li>
<li><a href='#'><span>Womens</span></a></li>
<li><a href='#'><span>Girls</span></a></li>
<li class='last'><a href='#'><span>Boys</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Boots</span></a>
<ul>
<li><a href='#'><span>Mens</span></a></li>
<li><a href='#'><span>Womens</span></a></li>
<li><a href='#'><span>Girls</span></a></li>
<li class='last'><a href='#'><span>Boys</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Sneakers</span></a> <ul>
<li><a href='#'><span>Mens</span></a></li>
<li><a href='#'><span>Womens</span></a></li>
<li><a href='#'><span>Girls</span></a></li>
<li class='last'><a href='#'><span>Boys</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Flip Flops <br>and Sandals</span></a>
<ul>
<li><a href='#'><span>Mens</span></a></li>
<li><a href='#'><span>Womens</span></a></li>
<li><a href='#'><span>Girls</span></a></li>
<li class='last'><a href='#'><span>Boys</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>Jibbitz</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</nav>
</div>

Well I've copied your code in this fiddle and it actually is fixed?
I didn't change anything - or did I get that wrong?
#navBar {
width: 100%;
position: fixed;
z-index: 100;
}
https://jsfiddle.net/3Lst3aqg/1/

auto resize navigation bar on window resize or mobile device

i have found the code for this: http://media02.hongkiat.com/responsive-web-nav/demo/index.html menu here: http://www.hongkiat.com/blog/responsive-web-nav/
and i am trying to do it with my menu:
CSS:
<style type="text/css">
#trans-nav {list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; }
#trans-nav li:hover { background-position: 0 -40px; }
#trans-nav li a { display: block; padding: 0 15px; color: #666666; text-decoration: none; }
#trans-nav li a:hover { background-color:#F36F25; color: #eeeeee; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #EEEEEE; list-style-type: none; padding: 0; margin: 0; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #EEEEEE; }
#trans-nav li ul li a:hover { background: #666666; color:#EEEEEE; }
#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }
</style>
HTML:
<ul id="trans-nav">
<li>Home</li>
<li>About</li>
<li>Products
<ul>
<li>Widgets</li>
<li>Thingamabobs</li>
<li>Doohickies</li>
</ul>
</li>
<li>Contact</li>
</ul>
for some reason i cannot get it working, any ideas what i can do to make my menu the same as the one on that website or alternatively, if that will be too complicated to get my menu to just change to a dropdown menu (select) on screen resize

You want to css media query
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Added in CSS3, media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
More details
https://developer.mozilla.org/en/docs/CSS/Media_queries
http://www.w3.org/TR/css3-mediaqueries/