CSS Menu Centering - javascript

There is probably something really obvious I'm missing but I can't seem to center this template menu I found. By center I mean center aligned within the screen. It's normally margin: 0px auto; and display: block; but I've had no luck.
Please see the jsfiddle link. If it doesn't display properly, drag the 'Results' tab to the left.
Many thanks
https://jsfiddle.net/dtb08ng1/
<body>
<div id='cssmenu'>
<ul>
<li class="active">Home</li>
<li class='has-sub'>Products
<ul>
<li>.com</li>
<li>8</li>
<li>Lion</li>
<li>News</li>
</ul>
</li>
<li>Events</li>
<li>About Us</li>
</ul>
</div>
</body>
</html>


Try to change:
#cssmenu {
width: 100%;
text-align: center;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
display:inline-block
}
Hope this will help you:
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($( window ).width() > 768) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$(document).ready(function() {
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
$("#cssmenu").prepend("<div id='menu-line'></div>");
var foundActive = false, activeElement, linePosition = 0, menuLine = $("#cssmenu #menu-line"), lineWidth, defaultPosition, defaultWidth;
$("#cssmenu > ul > li").each(function() {
if ($(this).hasClass('active')) {
activeElement = $(this);
foundActive = true;
}
});
if (foundActive === false) {
activeElement = $("#cssmenu > ul > li").first();
}
defaultWidth = lineWidth = activeElement.width();
defaultPosition = linePosition = activeElement.position().left;
menuLine.css("width", lineWidth);
menuLine.css("left", linePosition);
$("#cssmenu > ul > li").hover(function() {
activeElement = $(this);
lineWidth = activeElement.width();
linePosition = activeElement.position().left;
menuLine.css("width", lineWidth);
menuLine.css("left", linePosition);
},
function() {
menuLine.css("left", defaultPosition);
menuLine.css("width", defaultWidth);
});
});
});
})(jQuery);
/*------------------ CSS Menu ------------------*/
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0px auto;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: inline-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 {
width: auto;
margin: 0px auto;
font-family: arial, sans-serif;
line-height: 1;
background: #000000;
}
#menu-line {
position: absolute;
top: 0;
left: 0;
height: 3px;
background: #71b51e;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
margin: 0px auto;
}
#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.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
padding: 20px;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: #71b51e;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 25px;
}
#cssmenu > ul > li.has-sub > a::after {
position: absolute;
top: 21px;
right: 10px;
width: 4px;
height: 4px;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
content: "";
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-ms-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
#cssmenu > ul > li.has-sub:hover > a::after {
border-color: #71b51e;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
right: 0;
}
#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 {
height: 0;
-webkit-transition: height .2s ease;
-moz-transition: height .2s ease;
-ms-transition: height .2s ease;
-o-transition: height .2s ease;
transition: height .2s ease;
}
#cssmenu ul li:hover > ul > li {
height: 32px;
}
#cssmenu ul ul li a {
padding: 10px 20px;
width: 160px;
font-size: 12px;
background: #000000;
text-decoration: none;
color: #dddddd;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #71b51e;
}
#cssmenu ul ul li.has-sub > a::after {
position: absolute;
top: 13px;
right: 10px;
width: 4px;
height: 4px;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
content: "";
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-ms-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
right: auto;
left: 10px;
border-bottom: 0;
border-right: 0;
border-top: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}
#cssmenu ul ul li.has-sub:hover > a::after {
border-color: #ffffff;
}
#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;
margin : 0px auto;
}
#cssmenu.align-center > ul,
#cssmenu.align-right ul ul {
text-align: left;
}
#cssmenu ul li,
#cssmenu ul ul li,
#cssmenu ul li:hover > ul > li {
width: 100%;
height: auto;
border-top: 1px solid rgba(120, 120, 120, 0.15);
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
}
#cssmenu > ul > li,
#cssmenu.align-center > ul > li,
#cssmenu.align-right > ul > li {
float: none;
display: block;
}
#cssmenu ul ul li a {
padding: 20px 20px 20px 30px;
font-size: 12px;
color: #000000;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #000000;
}
#cssmenu ul ul ul li a {
padding-left: 40px;
}
#cssmenu ul ul,
#cssmenu ul ul ul {
position: relative;
left: 0;
right: auto;
width: 100%;
margin: 0;
}
#cssmenu > ul > li.has-sub > a::after,
#cssmenu ul ul li.has-sub > a::after {
display: none;
}
#menu-line {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 20px;
color: #000000;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
}
#cssmenu #menu-button::after {
content: '';
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 15px;
height: 2px;
background: #000000;
}
#cssmenu #menu-button::before {
content: '';
position: absolute;
top: 25px;
right: 20px;
display: block;
width: 15px;
height: 3px;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#cssmenu .submenu-button {
position: absolute;
z-index: 10;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.15);
height: 52px;
width: 52px;
cursor: pointer;
}
#cssmenu .submenu-button::after {
content: '';
position: absolute;
top: 21px;
left: 26px;
display: block;
width: 1px;
height: 11px;
background: #000000;
z-index: 99;
}
#cssmenu .submenu-button::before {
content: '';
position: absolute;
left: 21px;
top: 26px;
display: block;
width: 11px;
height: 1px;
background: #000000;
z-index: 99;
}
#cssmenu .submenu-button.submenu-opened:after {
display: none;
}
}
#cssmenu {
width: 100%;
text-align: center;
}
<body>
<div id='cssmenu'>
<ul>
<li class="active">Home</li>
<li class='has-sub'>Products
<ul>
<li>.com</li>
<li>8</li>
<li>Lion</li>
<li>News</li>
</ul>
</li>
<li>Events</li>
<li>About Us</li>
</ul>
</div>
</body>


Just change in css file below code:
CSS
#cssmenu {
width: auto;
margin: 0px auto;
font-family: arial, sans-serif;
line-height: 1;
background: #fff;
text-align:center;
}


I would wrap the div#cssmenu element in a div#container. That way you can make the menu display: inline-block; and use text-align: center; on the container div.
See updated JSfiddle at https://jsfiddle.net/dtb08ng1/2/.
Update
The new CSS I added to get this to work is as follows:
#container {
text-align: center;
width: 100%;
background: #000000;
}
#cssmenu {
display: inline-block;
…
}
The only HTML change I made was to wrap the div#cssmenu as follows:
…
<div id="container">
<div id="cssmenu">
…
</div>
</div>
…


Most Simple Pure CSS Menu
body {
margin: 0px;
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}
ul {
width: 100%;
text-align: center;
display: inline-block;
margin: 0px;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
background: #000;
color: #fff;
}
ul li {
font: 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 20px 20px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
color: #71b51e;
}
ul li ul {
padding: 0;
position: absolute;
left: 0;
top: 57px;
width: 140px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #000;
display: block;
color: #fff;
text-align: left;
padding: 5px 15px;
height: 25px;
}
ul li ul li:hover {
background: #111;
color: #71b51e;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>
EVENTS
<ul>
<li>.com</li>
<li>8</li>
<li>Lion</li>
<li>News</li>
</ul>
</li>
<li>ABOUT US</li>
</ul>
DEMO

Related

Scrolling up should show the navigation

working on my Site's navigation, I am trying to make the header look like this, the following works in a manner that when you scroll up, it shows the menu and when you scroll down, it hides and when you are at top the page, it keeps showing
https://wake.com/
but as of now, my navigation is sticky, like it shows when you scroll down and scroll up, it keeps there
my piece of code is this for the navigation
HTML Code
<header id="header">
<!-- start Navbar (Header) -->
<nav class="navbar navbar-primary navbar-fixed-top navbar-sticky-function">
<div id="top-header">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 clearfix">
<div class="top-header-widget welcome">
<p>Welcome Guest | Apply</p>
</div>
</div>
<div class="col-sm-6 clearfix hidden-xs">
<div class="top-header-widget pull-right"> <i class="fa fa-phone"></i> call (111) 255-4433 </div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="navbar-header"> <a class="navbar-brand" href="index.html"><img class="imgcontrol" src="images/o.png" alt="Maike your Car Guy" border="0" /></a></div>
<div id="navbar" class="collapse navbar-collapse navbar-arrow pull-left">
<ul class="nav navbar-nav" id="responsive-menu">
<li> About
<ul>
<li>Why?</li>
</ul>
</li>
<li> Resources
<ul>
<li>How it works</li>
<li> Videos</li>
</ul>
</li>
<li>Contact</li>
<li>Apply</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<div id="slicknav-mobile"></div>
</nav>
<!-- end Navbar (Header) -->
</header>
CSS Code
.navbar {
border-bottom: 0;
-webkit-transition: all 0.1s ease-in-out 0s;
-moz-transition: all 0.1s ease-in-out 0s;
-ms-transition: all 0.1s ease-in-out 0s;
-o-transition: all 0.1s ease-in-out 0s;
transition: all 0.1s ease-in-out 0s;
}
.navbar-brand {
float: left;
font-size: 24px;
line-height: 32px;
font-weight: 500;
position: relative;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
padding-top: 20px;
padding-bottom: 50px;
color: #555;
margin-right: 25px;
}
.navbar-brand i {
color: #0D7CC9;
font-size: 32px;
display: block;
margin-top: 0;
float: left;
margin-right: 7px;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 0
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px
}
.navbar-nav {
border-left: 1px solid #EEEEEE;
padding-left: 25px;
}
.navbar-nav > li:not(:last-child) {
margin-right: 10px;
}
.navbar-nav > li > a {
line-height: 72px;
font-weight: 500;
font-size: 14px;
padding-top: 0;
padding-bottom: 0;
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
letter-spacing: 1.5px;
color: #fff;
font-family: 'Frank Ruhl Libre', Old Standard TT;
}
.navbar-nav > li > a .border {
padding: 3px 10px;
border-color: rgba(255, 255, 255, 0.7);
}
.navbar-nav > li.navbar-separator span {
position: relative;
padding: 0 20px;
}
.navbar-nav > li.navbar-separator span:after {
content: "";
height: 50px;
width: 1px;
background: rgba(255, 255, 255, 0.9);
position: absolute;
top: 10px;
left: 50%;
-ms-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
/* Main Menu Dropdown */
.navbar-nav li {
position: relative;
}
.navbar-nav li ul {
z-index: 9999;
padding: 0;
margin: 0;
position: absolute;
top: 70px;
left: 0;
width: 190px;
display: none;
background-color: #FFF;
border: 1px solid #EEEEEE;
border-top: 2px solid #0095cd;
}
.navbar-nav li ul li a {
border-bottom: 1px solid #EEEEEE;
display: block;
padding: 8px 15px;
font-size: 13px;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
font-weight: 400;
color: #636363;
}
.navbar-nav li > ul > li:last-child > a,
.navbar-nav li > ul > li > ul > li:last-child > a {
border-bottom: 0;
}
.navbar-nav li ul li:hover a {
padding-left: 20px;
padding-right: 10px;
color: #0095cd;
}
.navbar-nav li ul li ul {
position: absolute;
left: 188px;
top: -2px;
box-shadow: -10px 1px 20px rgba(0, 0, 0, 0.1);
}
.navbar-nav li ul li:hover ul li a {
padding-left: 15px;
padding-right: 15px;
}
.navbar-nav li ul li ul li:hover a {
padding-left: 20px;
padding-right: 10px;
}
/* Mega Menu */
.navbar-nav > li.mega-menu {
position: inherit!important;
left: 0;
}
.navbar-nav > li.mega-menu ul {
left: 0%;
width: 100%;
top: 70px;
padding-top: 30px;
padding-bottom: 30px;
}
.navbar-nav > li.mega-menu:hover > a,
.navbar-nav > li.mega-menu > a:hover,
.navbar-nav > li.dropdown:hover > a,
.navbar-nav > li.dropdown > a:hover,
.navbar-nav > li.dropdown.active > a,
.navbar-nav > li.dropdown.active > a:hover,
.navbar-nav > li:hover > a,
.navbar-nav > li.active > a {
color: #0095cd !important;
background: none !important;
}
.navbar-arrow > ul > li .arrow-indicator {
margin-left: 7px;
color: #CCC;
}
.navbar-arrow ul ul > li .arrow-indicator {
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
font-size: 16px;
color: #CCC;
}
.megamenu-container .arrow-indicator {
display: none !important;
}
#media only screen and (max-width: 991px) {
.navbar {
margin: 0;
}
.navbar-brand {
padding-top: 9px;
padding-bottom: 0;
line-height: 30px;
}
.navbar-arrow > ul > li .arrow-indicator,
.navbar-arrow ul ul > li .arrow-indicator {
display: none !important;
}
.navbar-fixed-top {
position: relative !important;
clear: both;
}
}
#media (max-width: 767px) {
.navbar-nav .open .dropdown-menu > li > a {
line-height: 23px;
}
}
#media (min-width: 768px) {
.navbar-nav {
margin: 0;
}
}
/**
* Header Top
*/
#top-header {
-webkit-transition: all 0.15s ease-in-out 0s;
-moz-transition: all 0.15s ease-in-out 0s;
-ms-transition: all 0.15s ease-in-out 0s;
-o-transition: all 0.15s ease-in-out 0s;
transition: all 0.15s ease-in-out 0s;
opacity: 1;
background: #0095cd;
color: rgba(255, 255, 255, 0.9);
font-size: 11px;
letter-spacing: 0.5px;
overflow: hidden;
/*border-bottom: 1px solid #662935;*/
}
#top-header a {
color: rgba(255, 255, 255, 0.9);
font-weight: 700;
}
#top-header a:hover {
color: rgba(255, 255, 255, 1);
}
#top-header ul {
margin: 0;
}
.top-header-widget {
float: left;
border-right: 1px solid rgba(255,255,255,0.45);
padding: 5px;
padding-top: 7px;
padding-right: 10px;
padding-left: 10px;
}
.top-header-widget:first-child {
padding-left: 0;
}
.top-header-widget:last-child {
padding-right: 0;
border-right: none;
}
.top-header-widget.welcome {
background: #0078a6;
position: relative;
padding-right: 15px;
}
.top-header-widget.welcome:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -500px;
width: 500px;
background: #0078a6;
}
.top-header-widget.welcome:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -70px;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 0 0 70px;
border-color: transparent transparent transparent #0078a6;
}
.top-header-widget.pull-right:first-child {
padding-left: 10px;
}
.top-header-widget.pull-right:last-child {
padding-right: 10px;
border-right: 1px solid rgba(255,255,255,0.45);
}
#media only screen and (max-width: 1199px) {}
#media only screen and (max-width: 991px) {}
#media (max-width: 767px) {
.top-header-widget {
margin: 0;
}
#top-header,
.top-header-widget,
.top-header-widget p,
.top-header-widget a {
font-size: 11px !important;
line-height: 12px;
}
}
/**
* Sticky Header
*/
.navbar-sticky {
background-color: transparent;
border-color: #e6e6e6;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.12);
}
.navbar-sticky.navbar-default {
padding-top: 0;
padding-bottom: 0;
}
.navbar-sticky .navbar-brand {
padding-top: 20px;
padding-bottom: 40px;
}
.navbar-sticky .navbar-brand:hover,
.navbar-sticky .navbar-brand:focus {
color: #4D82B8;
background-color: transparent
}
.navbar-sticky .navbar-text {
color: #565656
}
.navbar-sticky .navbar-nav > li > a {
line-height: 55px;
color: #fff;
padding-top: 5px;
}
.navbar-sticky .navbar-nav > li > a:hover,
.navbar-sticky .navbar-nav > li > a:focus {
color: #4D82B8;
background-color: transparent
}
.navbar-sticky .navbar-nav > .active > a,
.navbar-sticky .navbar-nav > .active > a:hover,
.navbar-sticky .navbar-nav > .active > a:focus {
color: #4D82B8;
background-color: transparent
}
.navbar-sticky .navbar-nav > .disabled > a,
.navbar-sticky .navbar-nav > .disabled > a:hover,
.navbar-sticky .navbar-nav > .disabled > a:focus {
color: #444444;
background-color: transparent
}
.navbar-sticky .navbar-nav > li.navbar-separator span:after {
background: #4D82B9;
}
.navbar-sticky .navbar-nav > li > ul {
top: 60px;
}
.navbar-sticky .navbar-nav > li.mega-menu ul {
top: 60px;
}
.navbar-sticky #top-header {
opacity: 0;
}
.with-top-header .slicknav_btn {
top: 49px;
}
.with-top-header .navbar-sticky {
margin-top: -40px;
}
#media only screen and (max-width: 1199px) {}
#media only screen and (max-width: 991px) {
.with-top-header .navbar-sticky {
margin-top: -40px;
}
.navbar-sticky .navbar-brand {
padding-top: 9px;
}
}
#media (max-width: 767px) {
.with-top-header .slicknav_btn {
top: 42px;
}
}
#media (max-width: 479px) {}
this is the JS i have
/**
* Main Menu Slide Down Effect
*/
// Mouse-enter dropdown
$('#navbar li').on("mouseenter", function() {
$(this).find('ul').first().stop(true, true).delay(350).slideDown(500, 'easeInOutQuad');
});
// Mouse-leave dropdown
$('#navbar li').on("mouseleave", function() {
$(this).find('ul').first().stop(true, true).delay(100).slideUp(150, 'easeInOutQuad');
});
/**
* Effect to Bootstrap Dropdown
*/
$('.bt-dropdown-click').on('show.bs.dropdown', function(e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideDown(500, 'easeInOutQuad');
});
$('.bt-dropdown-click').on('hide.bs.dropdown', function(e) {
$(this).find('.dropdown-menu').first().stop(true, true).slideUp(250, 'easeInOutQuad');
});

You won't be able to reach this effect without Javascript. I suggest that you use this widget which works great: http://wicky.nillia.ms/headroom.js/

Since you didn't include your javascript, can't see what you're doing.
The premise of the interaction you want to listen for the scroll event on the window (using javascript), and add or remove the appropriate CSS class depending on the direction of the scroll (which would animate it up out of view, or down into the view)
To determine the direction of the scroll, check this out: Javascript - Detecting scroll direction
Edit: The event you want to listen to is scroll, and you want to listen to it on the window.
$(window).on('scroll',function(e){
//if scroll direction = up, add class to show nav bar (including animations)
//else remove class if nav hasClass
});
You should probably have a class that makes it visible by changing the top position. It should be negative by default so it is hidden by default, and add your css transition to the default style of the nav. The "show" class will only have the new top position. It should be zero. This would be the only property that transitions when the nav bar hides or shows.
When the class is added to show the nav bar, it would transition the top property to slide down to 0, and when the class is removed to hide it, the top property slides up to the negative number. This negative number should be at least the height of the nav bar, or more, to properly hide it off-screen.

Issue with a dropdown menu

I don't know what happen with the dropdown menu, when I move the mouse I can't touch the dropdown :( I try with a line, modifing the padding and It makes me move all the line.. is all about the code below.. just si what you can do for me and thanks a lot
(function ($) {
$(document).ready(function () {
$('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
var activeElement = $('#cssmenu>ul>li:first');
$('#cssmenu>ul>li').each(function () {
if ($(this).hasClass('active')) {
activeElement = $(this);
}
});
var posLeft = activeElement.position().left;
var elementWidth = activeElement.width();
posLeft = posLeft + elementWidth / 2 - 6;
if (activeElement.hasClass('has-sub')) {
posLeft -= 6;
}
$('#cssmenu #pIndicator').css('left', posLeft);
var element, leftPos, indicator = $('#cssmenu pIndicator');
$("#cssmenu>ul>li").hover(function () {
element = $(this);
var w = element.width();
if ($(this).hasClass('has-sub')) {
leftPos = element.position().left + w / 2 - 12;
}
else {
leftPos = element.position().left + w / 2 - 6;
}
$('#cssmenu #pIndicator').css('left', leftPos);
}
, function () {
$('#cssmenu #pIndicator').css('left', posLeft);
});
$('#cssmenu>ul').prepend('<li id="menu-button"><a>Menu</a></li>');
$("#menu-button").click(function () {
if ($(this).parent().hasClass('open')) {
$(this).parent().removeClass('open');
}
else {
$(this).parent().addClass('open');
}
});
});
})(jQuery);
#cssmenu {
position: relative;
height: 30px;
width: auto;
display: inline-block;
margin-top: 3px;
box-sizing: border-box;
}
#cssmenu ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
#cssmenu > ul {
position: relative;
display: block;
width: 100%;
z-index: 500;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu > ul > li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
#cssmenu > ul > #menu-button {
display: none;
}
#cssmenu ul li a {
display: block;
font-family: Helvetica, sans-serif;
text-decoration: none;
}
#cssmenu > ul > li > a {
font-size: 14px;
font-weight: bold;
padding: 0px 20px;
color: #7a8189;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu li.has-sub::after {
display: block;
content: "";
position: absolute;
width: 0;
height: 0;
}
#cssmenu > ul > li.has-sub::after {
right: 18px;
top: 6px;
border: 5px solid transparent;
border-top-color: #7a8189;
}
#cssmenu > ul > li:hover::after {
border-top-color: #ffffff;
}
#indicatorContainer {
position: absolute;
height: 12px;
width: 100%;
bottom: 0px;
overflow: hidden;
z-index: -1;
}
#pIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
z-index: -2;
-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-ms-transition: left .25s ease;
-o-transition: left .25s ease;
transition: left .25s ease;
}
#cIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
top: -12px;
right: 100%;
z-index: -2;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}
#cssmenu ul ul ul {
top: 37px;
padding-left: 5px;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
opacity: 1;
}
#cssmenu ul ul li:hover > ul {
left: 170px;
top: 0;
opacity: 1;
}
#cssmenu.align-right ul ul li:hover > ul {
left: auto;
right: 170px;
top: 0;
opacity: 1;
padding-right: 5px;
}
#cssmenu ul ul li a {
width: 130px;
border-bottom: 1px solid #eeeeee;
padding: 10px 20px;
font-size: 12px;
color: #9ea2a5;
background: #ffffff;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu ul ul li:hover > a {
background: #f2f2f2;
color: #8c9195;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
border-bottom: 0;
}
#cssmenu > ul > li > ul::after {
content: '';
border: 6px solid transparent;
width: 0;
height: 0;
border-bottom-color: #ffffff;
position: absolute;
top: -12px;
left: 30px;
}
#cssmenu.align-right > ul > li > ul::after {
left: auto;
right: 30px;
}
#cssmenu ul ul li.has-sub::after {
border: 4px solid transparent;
border-left-color: #9ea2a5;
right: 10px;
top: 12px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub::after {
border-left-color: transparent;
border-right-color: #9ea2a5;
right: auto;
left: 10px;
}
#cssmenu ul ul li.has-sub:hover::after {
border-left-color: #ffffff;
right: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#cssmenu.align-right ul ul li.has-sub:hover::after {
border-right-color: #ffffff;
border-left-color: transparent;
left: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
<!DOCTYPE html>
<html>
<header></header>
<body>
<div class="subheader">
<div class="user_inside">
<p>Welcome Giocconda</p>
<div id="cssmenu">
<ul>
<li class='active has-sub'>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a></li>
<li class='has-sub'><a href='#'><span>Product 2</span></a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>

#cssmenu ul ul{
position: absolute;
left: 0px;
top: 50px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}
Change left position in css

how to change category right to left in this menu

I am writing Arabic in this CSS3 menu but i have probleme in direction
look in this image please : http://im83.gulfup.com/ZMFYxg.png
so I need to change the direction of subcategory to 'Right to Left'
so how can fixed that subcategory in left help me please
#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 {
width: auto;
font-family:"chakirHelve",sans-serif;
line-height: 1;
background: #31b0d5;
}
#cssmenu > ul > li {
float: right;
border-left:1px solid #79cee5;
}
#cssmenu > ul > li:hover {
background: #57c2e0;
}
#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.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
padding: 15px;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
color: white;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: white;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
right: 0;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-left: 100%;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: height .2s ease;
-moz-transition: height .2s ease;
-ms-transition: height .2s ease;
-o-transition: height .2s ease;
transition: height .2s ease;
}
#cssmenu ul li:hover > ul > li {
height: 32px;
}
#cssmenu ul ul li a {
padding: 20px 20px;
width: 160px;
font-size: 12px;
background: #31b0d5;
text-decoration: none;
float:left;
color: white;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a {
color:white;
text-align: right;
}
#cssmenu ul ul li.has-sub > a::after {
position: absolute;
top: 22px;
left: 10px;
width: 4px;
height: 4px;
border-bottom: 1px solid #dddddd;
border-left: 1px solid #dddddd;
content: "";
text-align: right;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
right: auto;
left: 10px;
border-bottom: 0;
border-right: 0;
border-top: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}
#cssmenu ul ul li.has-sub:hover > a::after {
border-color: #ffffff;
}
and this html code
<div id='cssmenu'>
<ul>
<li><a href='#'>الرئيسية</a></li>
<li class='active has-sub'><a href='#'>
<span class='rgt'>جميع المشاريع </span>
</a>
<ul>
<li class='has-sub'><a href='#'>جميع المشاريع</a>
<ul>
<li><a href='#'>subcategory</a></li>
<li><a href='#'>subcategory</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'>إعلانات</a>
<ul>
<li><a href='#'>subcategory</a></li>
<li><a href='#'>subcategory</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>إعلانات حديثة </a></li>
<li><a href='#'>مشاريع جديدة </a></li>
<li><a href='#'>الإعلانات المدفوعة </a></li>
<li><a href='#'>راسلنا</a></li>
</ul>
</div>
so how can fixed that subcategory in left
help me please

Try this, it will work. There is some changes:
http://jsfiddle.net/sherali/n6nrLgg9/10/ or http://jsfiddle.net/sherali/n6nrLgg9/10/show/
UPDATED:
put class="align-right" class to html(where id="cssmenu" has).
CSS changes:
#cssmenu li:hover > ul {
left: auto;
z-index:2;//have added
}
#cssmenu ul ul li.has-sub{
position: relative;//has added
}
#cssmenu ul ul ul {
margin-left: 160px;//old version 100%
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 160px;//old version: margin-left: 100%;
}
#cssmenu ul li:hover > ul > li {
height: auto;//old version: 32px
}

Parallax cuts image in menu

I have a problem with my parallax function here
The function itself works great, but whenever I scroll down to where a parallax image is (for example on one of the product pages), and at the same time hover over the top menu products, it makes the images disappear. From what I know, it only occurs in Chrome.
I know for sure it's the parallax function, because if I delete the parallax mirror div, it all works great again.
Have anyone experienced the same thing, or has a clue of why it's doing like this, please let me know!
EDIT: Hi, Here's a jsfiddle! http://jsfiddle.net/fxL7yq35/7/
/*!
* parallax.js v1.3.1 (http://pixelcog.github.io/parallax.js/)
* #copyright 2015 PixelCog, Inc.
* #license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
*/
!function(t,i,e,s){function o(i,e){var h=this;"object"==typeof e&&(delete e.refresh,delete e.render,t.extend(this,e)),this.$element=t(i),!this.imageSrc&&this.$element.is("img")&&(this.imageSrc=this.$element.attr("src"));var r=(this.position+"").toLowerCase().match(/\S+/g)||[];return r.length<1&&r.push("center"),1==r.length&&r.push(r[0]),("top"==r[0]||"bottom"==r[0]||"left"==r[1]||"right"==r[1])&&(r=[r[1],r[0]]),this.positionX!=s&&(r[0]=this.positionX.toLowerCase()),this.positionY!=s&&(r[1]=this.positionY.toLowerCase()),h.positionX=r[0],h.positionY=r[1],"left"!=this.positionX&&"right"!=this.positionX&&(this.positionX=isNaN(parseInt(this.positionX))?"center":parseInt(this.positionX)),"top"!=this.positionY&&"bottom"!=this.positionY&&(this.positionY=isNaN(parseInt(this.positionY))?"center":parseInt(this.positionY)),this.position=this.positionX+(isNaN(this.positionX)?"":"px")+" "+this.positionY+(isNaN(this.positionY)?"":"px"),navigator.userAgent.match(/(iPod|iPhone|iPad)/)?(this.iosFix&&!this.$element.is("img")&&this.$element.css({backgroundImage:"url("+this.imageSrc+")",backgroundSize:"cover",backgroundPosition:this.position}),this):navigator.userAgent.match(/(Android)/)?(this.androidFix&&!this.$element.is("img")&&this.$element.css({backgroundImage:"url("+this.imageSrc+")",backgroundSize:"cover",backgroundPosition:this.position}),this):(this.$mirror=t("<div />").prependTo("body"),this.$slider=t("<img />").prependTo(this.$mirror),this.$mirror.addClass("parallax-mirror").css({visibility:"hidden",zIndex:this.zIndex,position:"fixed",top:0,left:0,overflow:"hidden"}),this.$slider.addClass("parallax-slider").one("load",function(){h.naturalHeight&&h.naturalWidth||(h.naturalHeight=this.naturalHeight||this.height||1,h.naturalWidth=this.naturalWidth||this.width||1),h.aspectRatio=h.naturalWidth/h.naturalHeight,o.isSetup||o.setup(),o.sliders.push(h),o.isFresh=!1,o.requestRender()}),this.$slider[0].src=this.imageSrc,void((this.naturalHeight&&this.naturalWidth||this.$slider[0].complete)&&this.$slider.trigger("load")))}function h(s){return this.each(function(){var h=t(this),r="object"==typeof s&&s;this==i||this==e||h.is("body")?o.configure(r):h.data("px.parallax")||(r=t.extend({},h.data(),r),h.data("px.parallax",new o(this,r))),"string"==typeof s&&o[s]()})}!function(){for(var t=0,e=["ms","moz","webkit","o"],s=0;s<e.length&&!i.requestAnimationFrame;++s)i.requestAnimationFrame=i[e[s]+"RequestAnimationFrame"],i.cancelAnimationFrame=i[e[s]+"CancelAnimationFrame"]||i[e[s]+"CancelRequestAnimationFrame"];i.requestAnimationFrame||(i.requestAnimationFrame=function(e){var s=(new Date).getTime(),o=Math.max(0,16-(s-t)),h=i.setTimeout(function(){e(s+o)},o);return t=s+o,h}),i.cancelAnimationFrame||(i.cancelAnimationFrame=function(t){clearTimeout(t)})}(),t.extend(o.prototype,{speed:.2,bleed:0,zIndex:-99999,iosFix:!0,androidFix:!0,position:"center",overScrollFix:!1,refresh:function(){this.boxWidth=this.$element.outerWidth(),this.boxHeight=this.$element.outerHeight()+2*this.bleed,this.boxOffsetTop=this.$element.offset().top-this.bleed,this.boxOffsetLeft=this.$element.offset().left,this.boxOffsetBottom=this.boxOffsetTop+this.boxHeight;var t=o.winHeight,i=o.docHeight,e=Math.min(this.boxOffsetTop,i-t),s=Math.max(this.boxOffsetTop+this.boxHeight-t,0),h=this.boxHeight+(e-s)*(1-this.speed)|0,r=(this.boxOffsetTop-e)*(1-this.speed)|0;if(h*this.aspectRatio>=this.boxWidth){this.imageWidth=h*this.aspectRatio|0,this.imageHeight=h,this.offsetBaseTop=r;var n=this.imageWidth-this.boxWidth;this.offsetLeft="left"==this.positionX?0:"right"==this.positionX?-n:isNaN(this.positionX)?-n/2|0:Math.max(this.positionX,-n)}else{this.imageWidth=this.boxWidth,this.imageHeight=this.boxWidth/this.aspectRatio|0,this.offsetLeft=0;var n=this.imageHeight-h;this.offsetBaseTop="top"==this.positionY?r:"bottom"==this.positionY?r-n:isNaN(this.positionY)?r-n/2|0:r+Math.max(this.positionY,-n)}},render:function(){var t=o.scrollTop,i=o.scrollLeft,e=this.overScrollFix?o.overScroll:0,s=t+o.winHeight;this.visibility=this.boxOffsetBottom>t&&this.boxOffsetTop<s?"visible":"visible",this.mirrorTop=this.boxOffsetTop-t,this.mirrorLeft=this.boxOffsetLeft-i,this.offsetTop=this.offsetBaseTop-this.mirrorTop*(1-this.speed),this.$mirror.css({transform:"translate3d(0px, 0px, 0px)",visibility:this.visibility,top:this.mirrorTop-e,left:this.mirrorLeft,height:this.boxHeight,width:this.boxWidth}),this.$slider.css({transform:"translate3d(0px, 0px, 0px)",position:"absolute",top:this.offsetTop,left:this.offsetLeft,height:this.imageHeight,width:this.imageWidth,maxWidth:"none"})}}),t.extend(o,{scrollTop:0,scrollLeft:0,winHeight:0,winWidth:0,docHeight:1<<30,docWidth:1<<30,sliders:[],isReady:!1,isFresh:!1,isBusy:!1,setup:function(){if(!this.isReady){var s=t(e),h=t(i);h.on("scroll.px.parallax load.px.parallax",function(){var t=o.docHeight-o.winHeight,i=o.docWidth-o.winWidth;o.scrollTop=Math.max(0,Math.min(t,h.scrollTop())),o.scrollLeft=Math.max(0,Math.min(i,h.scrollLeft())),o.overScroll=Math.max(h.scrollTop()-t,Math.min(h.scrollTop(),0)),o.requestRender()}).on("resize.px.parallax load.px.parallax",function(){o.winHeight=h.height(),o.winWidth=h.width(),o.docHeight=s.height(),o.docWidth=s.width(),o.isFresh=!1,o.requestRender()}),this.isReady=!0}},configure:function(i){"object"==typeof i&&(delete i.refresh,delete i.render,t.extend(this.prototype,i))},refresh:function(){t.each(this.sliders,function(){this.refresh()}),this.isFresh=!0},render:function(){this.isFresh||this.refresh(),t.each(this.sliders,function(){this.render()})},requestRender:function(){var t=this;this.isBusy||(this.isBusy=!0,i.requestAnimationFrame(function(){t.render(),t.isBusy=!1}))}});var r=t.fn.parallax;t.fn.parallax=h,t.fn.parallax.Constructor=o,t.fn.parallax.noConflict=function(){return t.fn.parallax=r,this},t(e).on("ready.px.parallax.data-api",function(){t('[data-parallax="scroll"]').parallax()})}(jQuery,window,document);
/* P A R A L L A X */
.parallax-fullwidth {
height: 550px;
background: transparent;
position:relative;
overflow:hidden !important;
}
.parallax-fullwidth .two-column-left,
.parallax-fullwidth .two-column-right {
padding: 50px 10%;
width: 35% !important;
text-align: center;
min-width: 300px}
.parallax-mirror {
/*overflow: hidden !important;*/
overflow: visible !important;}
/* MENU */
.sub-navigation {
clear: both;
margin: 0 auto;
background-color: #f1efeb;
padding: 0px 10%;
width: 80%;
z-index: 1;
position: relative;
padding-top:55px;
height: 60px;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;}
.sub-holder,
.nav-holder {
text-align: left;
display:inline-table;
margin-left: 0px;
float: right;
width: 100%;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;}
.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus,
.sub-menu li:hover > a,
.sub-menu li a:hover,
.sub-menu li:focus > a,
.sub-menu li a:focus {
// set animation
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;}
.sub-navigation .sub-menu li {
text-align: left;
min-width: 130px;
margin: 0px !important;
height: 50px;
padding: 3px 2px 7px;}
.main-navigation .nav-menu li {
text-align: center;
margin: 8px 0px 0px;
height: 45px;
padding: 10px 0px 3px;}
.main-navigation .nav-menu li.main-item {
padding: 10px 3px 3px;}
.sub-navigation .sub-menu li a {
font-size: 12px;}
.sub-navigation .sub-menu li a:hover {}
.sub-navigation .sub-menu li:hover {
background: #e3e1dc;}
.sub-navigation .navigation-link,
.main-navigation .navigation-link {
position: absolute;
bottom: 8px;
float: left;
line-height: 1.2em;
}
.sub-navigation .back,
.main-navigation .back {
-moz-transition-duration:.4s;
-o-transition-duration:.4s;
-webkit-transition-duration:.4s;
background-color:rgba(0, 0, 0, 0.5);
height:0;
width:100%;}
.sub-navigation:hover div.back,
.main-navigation:hover div.back {
height:250px;}
ul.sub-menu,
ul.nav-menu {
display:block;
float:left;
list-style:none;
margin:0;
width: 100% !important;
position:relative;}
ul.sub-menu li,
ul.nav-menu li {
float:right;
margin:0 5px 0 0;
line-height: normal !important;}
ul.nav-menu li {
font-size: 15px;
margin-top: 7px;}
ul.sub-menu li > a,
ul.nav-menu li > a {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
display:table-cell;
vertical-align: bottom;
padding:0 6px;
text-decoration:none;
}
.active {
color:#a2a09c !important;}
ul.sub-menu li > a {
height: 50px;}
ul.sub-menu li a img,
ul.nav-menu li a img {
vertical-align: bottom !important;
bottom: 0px;
}
.subs {
left:0;
position:absolute;
top:60px;
width:100%;
font-size: 16px;
visibility: hidden;
opacity:0;
height: 0px;
text-align: left;
overflow: hidden;
transition: height 0.5s ease 0s,visibility 0s 0.3s,opacity 0.3s;
-webkit-transition: height 0.5s ease 0s,visibility 0s 0.3s,opacity 0.3s;
-moz-transition: height 0.5s ease 0s,visibility 0s 0.3s,opacity 0.3s;
-o-transition: height 0.5s ease 0s,visibility 0s 0.3s,opacity 0.3s;
}
.main-navigation .subs {
top: 55px;}
.sub-menu > li:hover > .subs,
.nav-menu > li:hover > .subs {
background: #e3e1dc;
visibility: visible;
opacity: 1;
height: 450px !important;
// set animation
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.subs > .subs-content {
padding: 4% 8%;
opacity: 0;
transition: opacity 0.5s ease 0.2s;
-webkit-transition: opacity 0.5s ease 0.2s;
-moz-transition: opacity 0.5s ease 0.2s;
-o-transition: opacity 0.5s ease 0.2s;
}
.subs-content .icon-description {
margin-top: 10px !important;}
.icon-description {
margin-top: 30px;}
.icon-description h4 {
margin: 0px !important;}
.sub-menu > li:hover > .subs .subs-content,
.nav-menu > li:hover > .subs .subs-content {
opacity: 1;}
.subs > .subs-content > .subs-column {
float: left;
width: 49%;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
top: 20px;}
.subs-column img {
width: 100%;
height: auto;
max-width: 470px}
.subs > .subs-content > .subs-column-right {
float: right;
width: 46%;}
.sub-menu li div.subs dl,
.nav-menu li div.subs dl {
-moz-transition-duration:.2s;
-o-transition-duration:.2s;
-webkit-transition-duration:.2s;
float:left;
margin:0 130px 0 0;
overflow:hidden;
padding:40px 0 5% 2%;
width:0;
}
.sub-menu dt,
.nav-menu dt {
color:#fc0;
font-family:arial, sans-serif;
font-size:12px;
font-weight:700;
height:20px;
line-height:20px;
margin:0;
padding:0 0 0 10px;
white-space:nowrap;
}
.sub-menu dd,
.nav-menu dd {
margin:0;
padding:0;
text-align:left;
}
.sub-menu dd a,
.nav-menu dd a {
background:transparent;
color:#fff;
height:20px;
padding:0 0 0 10px;
text-align:left;
white-space:nowrap;
width:80px;
}
.sub-menu dd a:hover,
.nav-menu dd a:hover {
color:#fc0;
}
.sub-menu li:hover div.subs dl,
.nav-menu li:hover div.subs dl {
-moz-transition-delay:0.2s;
-o-transition-delay:0.2s;
-webkit-transition-delay:0.2s;
margin-right:2%;
width:21%;
}
ul.sub-menu li:hover > a,
ul.sub-menu li > a:hover,
ul.nav-menu li:hover > a,
ul.nav-menu li:hover > a {
color: #a2a09c;
}
ul.sub-menu li:hover:after,
ul.nav-menu li:hover:after {
background: url(../images/sub_hover.png);
width: 33px;
height: 20px;}
.sub-menu li:hover div.subs,
.sub-menu li a:hover div.subs,
.nav-menu li:hover div.subs,
.nav-menu li a:hover div.subs {
width:100%;
}
.nav-menu .sub-item {
min-width: 10px !important;
margin-top: 0px !important;
padding: 4px 0px 6px !important;
opacity: 1;
visibility: visible;}
.nav-menu .sub-item a {
height: 46px;}
.nav-menu .sub-item:hover {
background: #e3e1dc;}
.js .nav-menu {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
zoom: 1;
}
.nav-menu.opened {
max-height: 9999px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav class="sub-navigation">
<div class="navigation-content">
<ul class="sub-menu slide">
<li><a href="/products/viktstart/"><img src="http://betavivo.se/wp-content/themes/betavivo/images/Betavivo_ViktStart_icon_small.png" class="img_left" /><span class="navigation-link">Betavivo <br />
<span class="viktstart-text">vikt>start</span></span></a>
<div class="subs">
<div class="subs-content">
<div class="subs-column">
<img src="http://betavivo.se/wp-content/themes/betavivo/images/Betavivo_ViktStart_icon.png" />
</div>
<div class="subs-column-right"><h2>Betavivo <br>
<span class="viktstart-text">vikt>start</span></h2>
<p>Betavivo vikt>start är ett kosttillskott med glukomannan som bidrar till viktminskning.</p>
Läs mer
<div class="clear"></div>
<div class="icon-description">
<img src="http://betavivo.se/wp-content/themes/betavivo/images/icon_weightloss.png" class="icon_left" />
<div style="overflow:hidden;">
<h4>Viktminskning</h4>
<small>Glukomannan bidrar till viktminskning i samband med intag av en energibegränsad kost.</small>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</li>
</ul>
<div class="clear"></div>
</div>
</nav>
hej
<div class="parallax-fullwidth animatedParent" data-position="top" data-parallax="scroll" data-speed="0.5" data-bleed="10" data-image-src="http://betavivo.se/wp-content/uploads/2015/05/Viktstart.jpg" data-natural-width="2000" data-natural-height="1333" data-position="0px 0px"></div>

Can't get dropdown menu slide effect to work though I have tried for quite a while

I've made this dropdown menu that I want to add some nice slide effects on. Since I'm new to programming I can't get it to work, and I've googled for hours. I've prepared A jsfiddle
[Here][1] (cause that's what I should've done, right?).
I would appreciate it so much if I got a little help.
Thank you!
[1]: http://jsfiddle.net/knickemackan/2r6FE/

I have updated the JS Fiddle
You need to add jquery file, and add a little code to the JS file as shown below.
$("#navMainWrap li, #navMainWrap li a").hover(function () {
$(this).find("ul").slideDown("slow");
}, function() {
$(this).find("ul").slideUp("slow");
});
Regards D.

If you do "display:block;"; the height of the element won't animate automatically.
( http://jsfiddle.net/2r6FE/11/ )
Update your CSS like this:
#body {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
background-color: #FFF;
}
#header_wrapper {
width: 100%;
height: 150px;
margin: 0 auto;
background-color: #FFF;
}
#logo_wrapper {
height: 150px;
margin-left: 10%;
width: 500px;
background-image: url(../img/logo.png);
}
#nav {
background-color: #FFF;
border: 1px solid #ccc;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
z-index: 998;
position: relative;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
z-index: 999;
}
#nav ul li {
display: inline-block;
z-index: 1000;
position: relative;
}
#nav ul li:hover {
background-color: #BFF2FF;
}
#nav ul li a, visited {
color: #999;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li ul {
max-height:0;
-webkit-transition-property: max-height,opacity;
-moz-transition-property: max-height,opacity;
-ms-transition-property: max-height,opacity;
-o-transition-property: max-height,opacity;
transition-property: max-height,opacity;
-webkit-transition-duration: 0.3s,0,3s;
-moz-transition-duration: 0.3s,0,3s;
-ms-transition-duration: 0.3s,0,3s;
-o-transition-duration: 0.3s,0,3s;
transition-duration: 0.3s,0,3s;
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-ms-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
overflow:hidden;
}
#nav ul li:hover ul {
max-height:600px;
}
#nav ul ul {
display: block;
position: absolute;
background-color: #FFFFFF;
border: 5px solid #ddd;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display:block;
}
#nav ul ul li a:hover {
color: #FFF;
}
#uploadcont {
background-color: fff;
height: 200px;
width: 500px;
}
#contactcont {
background-color: #ffffff;
width: 500px;
}
.alleft {
text-align: left;
}
#uploadcont_in {
height: auto;
margin: 25px;
padding: 10px;
border: 10px solid #FFF;
}
#contactcont_in {
height: auto;
margin: 25px;
padding: 10px;
}

To get something like a slide effect, you could use the max-height property:
#nav ul li:hover ul {
max-height: 500px;
}
#nav ul ul {
display:inline-block;
max-height: 0;
position: absolute;
overflow:hidden;
background-color: #FFFFFF;
border: 5px solid #ddd;
border-top: 0;
margin-left: -5px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 1s ease-in;
-ms-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
}
This way, the sub-menus will expand when you hover its menu-point until they reach their original size or the max-height-value.
You could also use the left property instead of max-height to create a horizontal slide-effect.

Categories