We Keep Coding

CSS Menu - Submenu on click (JS)

I downloaded this menu. Seems to work good. But when you shrink the page the menu appears only when you click the button. Same for the subitems. But those subitems extends only when you click the "+" and not the "Products". I want to make it extend with both li (Products) and + symbol.
Image of shrank menu
The problem is in the .js file but I can't make it work.
(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(){
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
});
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #333333;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}
}
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>CSS MenuMaker</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>Products</a>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</body>
<html>
I would also like those sub-items centered.
PS: My menu will have only one sublevel. EG: Products > Product 1.

I have removed the sub-menu items of individual products in the HTML since there will only be 1 sub-level.
Relevant JS:
multiTg = function () {
cssmenu.find(".has-sub")
.prepend('<span class="submenu-button"></span>')
.on("click", function () {
submenuButton = $(this).find("span:first");
submenuButton.toggleClass('submenu-opened');
if (submenuButton.siblings('ul').hasClass('open')) {
submenuButton.siblings('ul').removeClass('open').hide();
} else {
submenuButton.siblings('ul').addClass('open').show();
}
});
/*
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();
}
});
*/
};
To center the submenu items
#cssmenu > ul > li.has-sub > ul > li > a {
text-align: center;
}
(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>')
.on("click", function () {
var submenuButton = $(this).find("span:first");
submenuButton.toggleClass('submenu-opened');
if (submenuButton.siblings('ul').hasClass('open')) {
submenuButton.siblings('ul').removeClass('open').hide();
} else {
submenuButton.siblings('ul').addClass('open').show();
};
});
/*
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(){
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
});
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #333333;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu > ul > li.has-sub > ul > li > a {
text-align: center;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}
}
<!doctype html>
<html lang=''>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>CSS MenuMaker</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>Products</a>
<ul>
<li><a href='#'>Product 1</a>
</li>
<li><a href='#'>Product 2</a>
</li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</body>
<html>

This works with both li (Product) and + symbol and the sub-level menu.
Add this function call:
e.stopPropagation();
Here is the complete JavaScript code to make it work:
(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.slideToggle().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>')
.on("click", function (e) {
e.stopPropagation();
var submenuButton = $(this).find("span:first");
submenuButton.toggleClass('submenu-opened');
if (submenuButton.siblings('ul').hasClass('open')) {
submenuButton.siblings('ul').removeClass('open').hide();
} else {
submenuButton.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(){
$("#cssmenu").menumaker({
title: "Sufi",
format: "multitoggle"
});
});
})(jQuery);

Navigation Menu Width Size, Fixed Menu on Top

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

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

Navbar's fixed position is not working

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

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

right align menu links on horizontal css menu

i have this css and html for a horizontal menu:
.nav > li:hover {
background: #666666;
text-decoration:none;
}
.active {
background: #666666;
text-decoration:none;
}
nav, ul, li, a {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.container {
width: 100%;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666666;
padding: 10px 15px;
color: #ffffff;
width:100%;
text-align:center;
}
.nav {
list-style: none;
*zoom: 1;
background:#f36f25;
text-align: center;
}
.nav:before,.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 12em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
text-align: left;
}
.nav > li {
display: inline-block;
}
.nav > li > .parent {
background-image: url("/images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #666666;
position: relative;
z-index:100;
border-top: 1px solid #ffffff;
}
.nav li li li a {
background:#f36f25;
color:#ffffff;
z-index:200;
border-top: 1px solid #ffffff;
}
#media screen and (max-width: 760px) {
.active {
display: block;
}
.nav {
border-top: none;
}
.nav > li {
display: block;
border-top: 1px solid #ffffff;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("/images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li><span>Homepage</span></li>
<li><span>About Us</span>
<ul>
<li><span>Who Are We?</span></li>
<li><span>Service Status</span></li>
<li><span>Contact Us</span></li>
<li><span>Terms & Conditions</span></li>
</ul>
</li>
</ul>
how can i make the main menu links align right rather than centre?
here is a fiddle: http://jsfiddle.net/B5jtm/

Try this:
.nav {text-align: right;}

Change:
text-align: center;
to:
text-align: right;
in:
.nav {
list-style: none;
*zoom: 1;
background:#f36f25;
text-align: right;
}
jsFiddle example

I removed text-align on the .togglemenu and changed .nav to text-align: right
Please see updated jsFiddle:
http://jsfiddle.net/B5jtm/10/

auto resize navigation bar on window resize or mobile device

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

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