We Keep Coding

Css3 animation glitch error Chrome and Firefox

I have this sidebar menu with css and bootstrap:
(please reduce size of the iframe to see the menu button)
http://jsfiddle.net/s8hts3v7/11/
If you toggle the sidebar menu you can detect some glitch and the sidebar is not smoothing in the animation.
This bad effect or glitch error it is even more detectable with Firefox.
The classes that I used for this menu are:
/*sidebar nav*/
.navbar-toggle {
background: #CFD8DC;
color: #666;
}
.navbar-toggle .icon-bar {
background: #666;
width: 17px;
height: 3px;
}
#sidebar-wrapper {
background: rgba(0,0,0,.5);
bottom: 0;
z-index: 500;
-webkit-transition-property: background,top,right,bottom,left;
transition-property: background,top,right,bottom,left;
-webkit-transition-duration: .5s,0,0,0,0;
transition-duration: .5s,0,0,0,0;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
#sidebar-wrapper.active {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#sidebar-menu {
margin-left: -250px;
left: 0;
width: 250px;
background: #f5f5f5;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.5s ease-in 0s;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-ms-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 50px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 55px;
line-height: 55px;
font-size: 18px;
background: white;
text-indent: initial;
padding-left: 12px;
}
.sidebar-brand img {
width: 134px;
}
.sidebar-brand #menu-close {
font-size: 26px;
font-weight: 200;
display: inline-block;
vertical-align: middle;
color: #9E9E9E;
cursor: pointer;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
display: inline-block;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#sidebar-wrapper.active #sidebar-menu {
left: 250px;
width: 250px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
How can i fix this?

Comment or remove background: rgba(0,0,0,.5); on #sidebar-wrapper (it is overlaying body when toggled):
Link to your JSFiddle
Firefox:
Chrome:
$(document).ready(function() {
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
});
html {
-webkit-font-smoothing: antialiased;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #737373;
font-size: 14px;
-webkit-font-smoothing: antialiased;
background: #E9E9E9 !important;
}
/*sidebar nav*/
.navbar-toggle {
background: #CFD8DC !important;
color: #666 !important;
}
.navbar-toggle .icon-bar {
background: #666 !important;
width: 17px !important;
height: 3px !important;
}
#sidebar-wrapper {
/* background: rgba(0,0,0,.5); */
bottom: 0;
z-index: 500;
-webkit-transition-property: background, top, right, bottom, left;
transition-property: background, top, right, bottom, left;
-webkit-transition-duration: .5s, 0, 0, 0, 0;
transition-duration: .5s, 0, 0, 0, 0;
-webkit-transition-delay: 0;
transition-delay: 0;
-webkit-transition-timing-function: ease;
transition-timing-function: ease;
}
#sidebar-wrapper.active {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#sidebar-menu {
margin-left: -250px;
left: 0;
width: 250px;
background: #f5f5f5;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.5s ease-in 0s;
-webkit-transition: all 0.5s ease-in 0s;
-moz-transition: all 0.5s ease-in 0s;
-ms-transition: all 0.5s ease-in 0s;
-o-transition: all 0.5s ease-in 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 50px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav>.sidebar-brand {
height: 55px;
line-height: 55px;
font-size: 18px;
background: white;
text-indent: initial;
padding-left: 12px;
}
.sidebar-brand img {
width: 134px;
}
.sidebar-brand #menu-close {
font-size: 26px;
font-weight: 200;
display: inline-block;
vertical-align: middle;
color: #9E9E9E;
cursor: pointer;
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
display: inline-block;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
#sidebar-wrapper.active #sidebar-menu {
left: 250px;
width: 250px;
transition: all 0.5s ease-out 0s;
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body id="fotieditor">
<div class="container-fluid">
<button id="menu-toggle" type="button" class="navbar-toggle toggle pull-left" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div id="sidebar-wrapper">
<div id="sidebar-menu">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<i id="menu-close" class="fa fa-times-circle-o"></i>
<img src="https://rp-static.com/www_mantaspersonalizadas/svg/mantas-personalizadas.svg" alt="">
</li>
<li>
Home
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</body>

How to move the sidebar to the right without changing the functionality

The code I am using is below.
All I need to do is move the sidebar to the right without changing the functionality. I managed to do this by setting the CSS margin-left but it affected the functionality of the sidebar.
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
MyWeb
</a>
</li>
<li>
Dashboard
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
Sidebar
</div>
</div>
</div>
</div>

You have left:250px. Why not replace that with right:0?
http://www.bootply.com/MQS5QZjHi4

change your css to:
#wrapper {
padding-right: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-right: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
right: 250px;
width: 0;
height: 100%;
margin-right: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-right: 250px;
}
#wrapper.toggled {
padding-right: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
good luck

Change position of sidebar fixed to absolute,
and then use margin-left
#sidebar-wrapper{
position: absolute;
margin-left: 900px;
}
Thanks

Try using float:right. But It will affect the height of #menu-toggle parent container. For this add a empty div with a style of clear:both like below.
<div class="col-lg-12">
Sidebar
<div style="clear:both"></div>
</div>

CSS Menu Centering

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

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.