We Keep Coding

3rd Level JQuery Dropdown Not Displaying

Trying to get 3 level dropdown working. In Opencart I have been using a third party repsonsive menu which works great. Demonstrated and available here http://cssmenumaker.com/menu/responsive-flat-menu
However, Opencart doesn't support 3 level categories so an addon is needed https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=19296
the 3rd levels categories are loaded but no displaying. Can anyone help get the thrid category and two systems merged and displaying over 1000px and even loading too with a + symbol?
Here is the dropdown menu in action at Plunkr https://plnkr.co/edit/hZG4pbVCXQupf2kgqoKF?p=preview
<div id="cssmenu"><div id="menu-button">Menu</div>
<ul>
<li class="has-sub"><span class="submenu-button"></span>Extractor Fans
<ul style="">
<li><a class="arrow" href="/bathroom-extractor-fans">Bathroom Shower</a>
<div class="has-sub"><span class="submenu-button"></span>
<ul>
<li>Designer Videos</li>
</ul>
</div>
</li>
<li> Bathroom Cabinets</li>
</ul>
</li>
</ul>
</div>

Here's my version, without changing your html and js. All of the changes are strictly within css. Most of the fix lied in getting rid of the following:
#cssmenu ul ul ul {
margin-left: 100%;
}
#cssmenu ul ul {
left: -9999px;
}
https://plnkr.co/edit/x4Lbw9AepcdIhkzBoAPM?p=preview

I could not understand your question properly but from what I understood I have a created a two level dropdown using jQuery. 'div' tag is used inside the 'li' tag so the HTML has to be structured just a little more.
$(document).ready(function() {
$("#first li").children('ul').hide();
$("#first li").hover(
function() {
$(this).children('ul').hide();
$(this).children('ul').slideDown('fast');
},
function() {
$('ul', this).slideUp('slow');
});
$("#second li").hover(
function() {
$(this).children('ul').hide();
$(this).children('ul').slideDown('fast');
},
function() {
$('ul', this).slideUp('slow');
});
});
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
line-height: 1;
position: relative;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
border: 0;
}
#cssmenu:after,
#cssmenu > ul:after {
line-height: 0;
display: block;
clear: both;
height: 0;
content: '.';
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Arial, Helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
border-radius: none;
background: #515151;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li > a {
font-size: 12px;
font-weight: bold;
padding: 10px 6px;
text-decoration: none;
letter-spacing: 1px;
text-transform: none;
color: #fff;
}
#first ul li a {
background-color: white;
font-size: 12px;
font-weight: bold;
padding: 10px 6px;
text-decoration: none;
letter-spacing: 1px;
text-transform: none;
color: black;
margin-left: 20px;
}
#first ul ul li a {
position: relative;
left: 40px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="cssmenu">
<div id="menu-button">Menu</div>
<ul id="first">
<li class="has-sub">Extractor Fans
<ul id="second">
<li>
<div>
<a class="arrow has-2nd-sub" href="#">Bathroom Shower</a>
</div>
<ul id="third">
<li class="has-3rd-sub">
<div>Designer Videos</div>
<div class="has-sub"><span class="submenu-button"></span>
</div>
</li>
</ul>
</li>
<li> Bathroom Cabinets
</li>
</ul>
</li>
</ul>
</div>

You shouldn't use a div inside the <li> element.
So it seems to work like this:
<div id="cssmenu">
<div id="menu-button">Menu</div>
<ul>
<li class="has-sub"><span class="submenu-button"></span>Extractor Fans
<ul style="">
<li><a class="arrow" href="/bathroom-extractor-fans">Bathroom Shower</a>
<ul class="has-sub submenu-button">
<li>Designer Videos</li>
</ul>
</li>
<li> Bathroom Cabinets
</li>
</ul>
</li>
</ul>
</div>
See https://plnkr.co/edit/Xc0jSmZd3Qa0koklgUBG?p=preview

Just change in css and you get the result what you have:
/* Line no 575*/
#cssmenu > ul > li > ul > li > div {
left: -100%;
top: 0px;
}
/* Line no 171*/
#cssmenu ul ul ul {
top: 0;
left: 0;
}
Check the link: https://plnkr.co/edit/qqqYbmwftggcggzvgjAQ?p=preview

How can I make this menu pure CSS? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
How can I make this pure CSS (no javascript)?
Here's a fiddle: http://jsfiddle.net/q646Ljg6/4/
HTML:
<div id="navigation" class="navigation">
<div id="dropmenu" class="dropmenu">
<login>
<ul>
<li> </span>
</li>
<li> Dropdown C
<ul>
<li><a href="#" >Option 1</a>
</li>
<li><a href="#" >Option 2</a>
</li>
<li><a href="#" >Option 3</a>
</li>
</ul>
</li>
</ul>
</login>
<ul>
<li> Home
</li>
<li> <a href="javascript:void(0);" >Dropdown A</a>
<div class="sub-menu">
<div class="sub-menu-inner">
<div>
<ul>
<li><a href="#" >Dropdown A - 1</a>
</li>
<li><a href="#" >Dropdown A - 2</a>
</li>
</ul>
</div>
</div>
<!-- /sub-menu-inner -->
</div>
<!-- /sub-menu -->
</li>
<li> <a href="javascript:void(0);" >Dropdown B</a>
<div class="sub-menu">
<div class="sub-menu-inner">
<div>
<ul>
<li> <a href="#" >Dropdown B - 1</a>
<ul>
<li><a href="#" >Dropdown B - 1 - 1</a>
</li>
</ul>
</li>
<li><a href="#" >Dropdown B - 2</a>
<ul>
<li><a href="#" >Dropdown B - 2 - 1</a>
</li>
<li><a href="#" >Dropdown B - 2 - 2</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /sub-menu-inner -->
</div>
<!-- /sub-menu -->
</li>
<li style="float:none;overflow:hidden;">
<div class="dark width-max"> <span>
<input id="quick-search" data-load="content" data-url="/quicksearch" class="search" type="text" placeholder="Quick Search" maxlength="50" autocomplete="off">
<div id="search-results" class="search-results"></div>
</span>
</div>
</li>
</ul>
</div>
</div>
<div>
content content content content content content content content content content content content content content content content content content content content content content content content </div>
Javascript:
var currentTop = -1;
var currentSub = -1;
var currentProfile = -1;
//var topMenu = '';
//var subMenu = '';
var lastToggled = '';
function InitNav() {
//$body.on('click', '#dropmenu > ul > li > a', ToggleTop);
$('#dropmenu > ul > li > a', 'body').mouseenter(ToggleTop);
$('#dropmenu', 'body').mouseleave(ToggleTop);
$body.on('click', '#dropmenu > ul > li ul > li > a', ToggleSub);
$('#dropmenu login a', 'body').mouseenter(ToggleProfileIn).mouseleave(ToggleProfileOut);
$body.on('click', '#dropmenu login a', ToggleProfile);
}
function ToggleTop(e) {
var $listItems = $('#dropmenu > ul > li');
if (currentProfile !== -1) { // reset profile if needed
lastToggled.removeClass('toggled');
}
if (currentTop !== -1) { // reset top menu
$listItems.eq(currentTop).removeClass('toggled');
}
var $currentTarg = $(e.currentTarget);
var $item = $currentTarg.parent('li');
var index = $item.index();
if (currentTop === index) { // reset
$item.removeClass('toggled');
currentTop = -1;
} else { // set
$item.addClass('toggled');
currentTop = index;
}
return false;
}
function ToggleSub(e) {
var $listItems = $('#dropmenu .sub-menu-inner > div > ul > li');
if (currentSub !== -1) { // reset
$listItems.removeClass('selected');
}
var $currentTarg = $(e.currentTarget);
var $item = $currentTarg.closest('#dropmenu .sub-menu-inner > div > ul > li');
var index = $item.index();
// set
$item.addClass('selected');
currentSub = index;
return false;
}
function ToggleProfileIn(e) {
var $listItems = $('#dropmenu > ul > li');
if (currentTop !== -1) { // reset
lastToggled = $listItems.eq(currentTop).removeClass('toggled');
}
}
function ToggleProfile(e) {
currentTop = -1;
var $listItems = $('#dropmenu login > ul > li');
if (currentProfile !== -1) { // reset
$listItems.removeClass('toggled');
}
var $currentTarg = $(e.currentTarget);
var $item = $currentTarg.closest('#dropmenu login > ul > li');
var index = $item.index();
// set
currentProfile = index;
lastToggled = $item.addClass('toggled');
return false;
}
function ToggleProfileOut(e) {
if (currentTop !== -1) { // restore
lastToggled.addClass('toggled');
}
}
InitNav();
CSS:
.navigation {
width: 100%;
height: 36px;
background-color: rgb(243, 245, 245);
}
.dropmenu {
position: relative;
width: 100%;
height: 36px;
font-weight: bold;
background: #3e494b;
/* menu background color */
}
.dropmenu ul {
list-style-type: none;
z-index: 50;
}
/* first level ul style */
/* .dropmenu > ul, */
.dropmenu .sub-menu-inner {
margin: 0 auto;
/*
background: rgb(130, 160, 46);
background: rgba(255, 160, 46, 0.92);
*/
}
.dropmenu > ul > li {
float: left;
z-index: 50;
}
.dropmenu > ul > li:nth-of-type(1) {
width: 187px;
}
.dropmenu > ul > li > a {
display: inline-block;
padding: 10px 20px;
color: #b1b6b9;
/* grey menu text color */
}
.dropmenu > ul > li > a:hover {
padding: 10px 20px 10px;
/* correlation with underline */
/*
border-top: 3px solid;
border-top-color: #b1b6b9;
*/
background-color: #596466;
/* #3e494b; /* dark grey */
color: #ffffff;
}
.dropmenu > ul > li.toggled > a, .dropmenu > ul > li.toggled > a:hover {
padding: 10px 20px 10px;
/* correlation with underline */
/*
border-top: 3px solid;
border-top-color: #b1b6b9;
*/
background-color: #596466;
/* #3e494b; /* dark grey */
color: #ffffff;
}
/* sub-menu */
.dropmenu .sub-menu {
display: none;
position: absolute;
/* background: #00a3da; */
width: 100%;
left: 0;
-webkit-box-shadow: 0 4px 5px -5px #000000;
-moz-box-shadow: 0 4px 5px -5px #000000;
box-shadow: 0 4px 5px -5px #000000;
}
.toggled .sub-menu {
display: block;
width: 100%;
background: #596466;
/* sub menu color */
/* border: 1px solid red; /**/
}
.dropmenu .sub-menu-inner > div {
width: 100%;
height: 100%;
float: left;
/* border: 1px solid green; /**/
}
/*
.dropmenu .sub-menu-inner > div > ul {
}
/**/
.dropmenu .sub-menu-inner > div > ul > li {
display: inline;
overflow: hidden;
position: relative;
}
.dropmenu .sub-menu-inner > div > ul > li:nth-of-type(1) {
margin-left: 187px;
}
.dropmenu .sub-menu-inner > div > ul > li > a {
padding: 10px 20px;
color: #d5d5d5;
/* border: 1px solid red; */
}
.dropmenu .sub-menu-inner > div > ul > li > a:hover {
padding: 10px 20px 10px;
/* correlation with underline */
color: #ffffff;
}
.dropmenu .sub-menu-inner > div > ul > li.selected > a, .dropmenu .sub-menu-inner > div > ul > li.selected > a:hover {
padding: 10px 20px 10px;
/* correlation with underline */
/*
background-color: rgb(243, 245, 245);
background-color: rgba(243, 245, 245, 0.9); /* almost white */
color: #ffffff;
}
.dropmenu .sub-menu-inner:before, .dropmenu .sub-menu-inner:after {
content:" ";
display: table;
}
.dropmenu .sub-menu-inner:after {
clear: both;
}
.dropmenu .sub-menu-inner > div a {
line-height: 36px;
}
/* drop-sub-menu */
.dropmenu .sub-menu-inner ul ul {
display: none;
position: absolute;
}
.dropmenu .sub-menu-inner ul > li:hover ul {
display: block;
left: 0px;
}
.dropmenu .sub-menu-inner ul > li > ul > li > a {
display: block;
padding: 0px 20px;
width: 145px;
background: #596466;
/* sub menu color */
color: #d5d5d5;
}
.dropmenu .sub-menu-inner ul > li > ul > li > a:hover {
/* background: #798486; /* sub menu hover color */
color: #ffffff;
}
/* login menu */
.dropmenu login ul {
margin: 0;
}
.dropmenu login > ul > li {
position: relative;
float: right;
}
.dropmenu login > ul > li > a {
display: inline-block;
padding: 10px 20px;
color: #b1b6b9;
/* grey menu text color */
}
.dropmenu login > ul > li > a:hover {
background-color: #596466;
/* #3e494b; /* dark grey */
color: #ffffff;
}
#cart-button {
font-size: 14px;
}
/* login drop-down */
.dropmenu login ul ul {
display: none;
position: absolute;
right: 0;
top: 100%;
}
.dropmenu login ul > li:hover ul {
display: block;
}
/* login sub-menu */
.dropmenu login > ul > li > ul > li > a {
display: inline-block;
width: 100px;
padding: 10px 20px;
background: #3e494b;
/* menu background color */
color: #b1b6b9;
/* light grey */
}
.dropmenu login > ul > li > ul > li > a:hover {
background-color: #596466;
/* #3e494b; /* dark grey */
color: #ffffff;
}
.dropmenu login > ul > li.toggled > a, .dropmenu login > ul > li.toggled > a:hover {
padding: 10px 20px 10px;
/* correlation with underline */
background-color: #596466;
color: #ffffff;
}
.width-max {
margin: 2px 10px 0 5px;
float:none;
overflow:hidden;
}

UPDATED:
<ul class="menu">
<li id="levela">A Level 1
<ul id="sub1" class="wide">
<li>A Level 2</li>
<li>A Level 2</li>
</ul>
</li>
<li id="levelb">B Level 1
<ul id="sub2" class="wide">
<li>B Level 2</li>
<li>B Level 2
<ul class="wide_sub">
<li>B Level 3</li>
<li>B Level 3</li>
</ul>
</li>
</ul>
</li>
<li style="position: relative;">C Level 1
<ul class="normal">
<li>C Level 2</li>
<li>C Level 2
<ul class="normal_sub">
<li>C Level 3</li>
<li>C Level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
css:
*, html, body {
margin: 0;
padding: 0;
line-height: 40px;
}
ul.menu {
list-style:none;
position: relative;
width: 100%;
display: block;
height: 40px;
display: inline-block;
background-color: yellow;
}
ul.menu > li {
display: block;
float: left;
padding: 0 10px;
cursor: pointer;
height: 100%;
}
ul.wide {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: 0 auto;
background-color: grey;
width: 100%;
height: 50px;
list-style: none;
}
ul.wide li {
float: left;
padding: 5px 10px;
position: relative;
}
ul.wide li:hover ul.wide_sub {
display: block;
}
ul.wide_sub {
display: none;
position: aboslute;
top: 100%;
left: 0;
list-style: none;
background-color: green;
}
ul.wide_sub li {
float: none;
}
ul.normal {
display: none;
position: absolute;
background-color: red;
top: 100%;
left: 0;
list-style: none;
}
ul.normal li {
float: none;
position: relative;
}
ul.normal_sub {
display: none;
position: absolute;
left:100%;
top: 0;
list-style: none;
width: 200px;
background-color: blue;
}
ul.normal li:hover ul.normal_sub {
display: block;
}
.menu li:hover ul.normal {
display: block;
}
#levela:hover #sub1 {
display: block;
}
#levelb:hover #sub2 {
display: block;
}
http://jsfiddle.net/michaelyuen/twdjobmL/1/
Hope that helps

HTML
<ul>
<li>
test
<ul>
<li>
hi!
</li>
</ul>
</li>
</ul>
CSS:
ul li ul{display:none;}
ul li:hover ul{display:block;}

Highlight current page menu item. Also highlight main menu item when sub menu item is selected

I am working on a project in ASP.net using C#. I have a masterpage in which there is a menu with sub menus for some menu items. I want the current page menu item be highlighted when selected. Also I want the main menu item be highlighted when any of the sub menu items are selected or their link is opened in the same page.
Any idea or solution using CSS or Javascript is expected. I have searched for solution on this forum but my requirements are different so i have failed till now to find a feasible one.
<pre>
Javascript:
<script src="../Scripts/jquery-2.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#nav').find('li a').click(function () {
$('#nav').find('li a').removeClass('active');
$(this).addClass('active');
$($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});
</script>
</pre>
<pre>
CSS:
#nav {
height: 50px;
width: auto;
position: relative;
background-color: #ad8f5d;
}
#nav ul li {
width:150px;
text-align:center;
}
#nav ul li a
{
color: Black;
font-size: 13px;
font-weight: bold;
line-height:50px;
text-decoration: none;
}
#nav li a.active
{
color:White;
}
#nav ul li a.has_submenu {
background: transparent url('../Images/submenu-item.jpg') no-repeat scroll right center;
padding-right: 0px;
}
#nav ul li a.has_submenu:hover, #nav ul li.sfHover a.has_submenu {
background-image: url('../Images/submenu-item-hover.jpg');
}
#nav ul ul li a.has_submenu {
background: transparent url('../Images/submenu-item-invert.jpg') no-repeat scroll right center;
padding-right: 0px;
}
#nav ul ul li a.has_submenu:hover, #nav ul ul li.sfHover a.has_submenu {
background-image: url('../Images/submenu-item-hover-invert.jpg');
}
#nav ul ul li a {
float: none;
width: 170px;
}
#nav ul > li:hover > a
{
background-color: #1f478d;
}
#nav ul ul > li:hover > a
{
background-color: #1f478d;
}
/*--------------------------Item Image Hover change---------------------CSS----*/
#nav ul > li:hover > a.has_submenu
{
background-image: url('../Images/submenu-item-hover.jpg');
}
#nav ul ul > li:hover > a.has_submenu
{
background-image: url('../Images/submenu-item-hover-invert.jpg');
}
/*--------------------------Item Image Hover change---------------------CSS ends----*/
#nav ul li a:hover, #nav ul li.sfHover a{
background-color: #1f478d;
}
#nav ul ul a
{
background-color: #ad8f5d;
}
#nav ul li li a:hover, #nav ul li.sfHover li a:hover {
background-color: #1f478d;
}
.sf-menu, .sf-menu *
{
height:50px;
margin: 0;
padding: 0;
list-style: none;
}
.sf-menu ul {
position: absolute;
top: -999em;
width: 200px;
margin-top: 0px;
padding-top: 0;
}
.sf-menu ul li {
width: 100%;
}
.sf-menu li:hover {
visibility: inherit;
}
.sf-menu li {
float: left;
position: relative;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
left: 0;
top: 49px;
z-index: 99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
left: 170px;
top: 0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
left: 10em;
top: 0;
}
</pre>
<pre>
HTML:
<div id="nav">
<ul class="sf-menu">
<li class="menu-item">Home</li>
<li class="menu-item"><a class="has_submenu" href="#">Examples</a>
<ul>
<li>Static Text Page</li>
<li>Static Frontpage</li>
<li>Another link</li>
</ul>
</li>
<li class="menu-item"><a class="has_submenu" href="#">Products</a>
<ul>
<li>Product One</li>
<li>Product Two</li>
<li>Product Three</li>
</ul>
</li>
<li class="menu-item">Solutions</li>
<li class="menu-item">Contact</li>
</ul>
</div>
</pre>

Use this code, if you need more then ask me.
$(document).ready(function () {
$('.menu-item').click(function () {
alert("S");
$('.menu-item a').css("color","black");
$(this).find('a').css("color","red");
// $($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});

JS accordion menu on wordpress site

I'm building a personal website for a friend and he has a lot of pieces for his portfolio page. So i wanted to create a JS accordion section for the content. Essentially working as a menu but when clicking the parent it will show a youtube embedded video, his resume, etc..
Here is the JS
$(function(){
$('#cssmenu > ul > li:has(ul)').addClass("has-sub");
$('#cssmenu > ul > li > a').click(function() {
var checkElement = $(this).next();
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$(this).closest('li').removeClass('active');
checkElement.slideUp('normal');
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if (checkElement.is('ul')) {
return false;
} else {
return true;
}
});
});
Here is the HTML
<div id="cssmenu">
<ul>
<li><span>Résumé</span>
<ul>
<li><span>content</span></li>
</ul>
</li>
<li><span>Video Reel</span>
<ul>
<li><span>content2</span></li>
</ul>
</li>
<li><span>Writing Clips</span>
<ul>
<li><span>Piece1</span>
<ul>
<li>Content1</li>
</ul>
</li>
<li><span>Piece2</span>
<ul>
<li>Content2</li>
</ul>
</li>
<li><span>Piece3</span>
<ul>
<li>Content3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
And here is the CSS
#cssmenu li,
#cssmenu a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
font-weight: normal;
text-decoration: none;
line-height: 1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
position: relative;
}
#cssmenu a {
line-height: 1.3;
}
/*First-level menu*/
#cssmenu {
width: 100%;
}
#cssmenu > ul > li > a {
padding-right: 40px;
font-size: 25px;
font-weight: bold;
display: block;
background: #bd0e36;
color: #000000;
border-bottom: 1px solid #5e071b;
text-transform: uppercase;
position: relative;
}
#cssmenu > ul > li > a > span {
background: #ed1144;
padding: 10px;
display: block;
font-size: 13px;
font-weight: 300;
}
#cssmenu > ul > li > a:hover {
text-decoration: none;
}
#cssmenu > ul > li.active {
border-bottom: none;
}
#cssmenu > ul > li.active > a {
color: #fff;
}
#cssmenu > ul > li.active > a span {
background: #bd0e36;
}
#cssmenu span.cnt {
position: absolute;
top: 8px;
right: 15px;
padding: 0;
margin: 0;
background: none;
}
/*Second-level menu*/
#cssmenu ul ul {
display: none;
}
#cssmenu ul ul li {
border: 1px solid #e0e0e0;
border-top: 0;
}
#cssmenu ul ul a {
padding: 10px;
display: block;
color: #ffffff;
font-size: 13px;
}
#cssmenu ul ul a:hover {
color: #bd0e36;
}
#cssmenu ul ul li.odd {
background: #B3D4FC;
}
#cssmenu ul ul li.even {
background: #B3D4FC;
}
The page that i'm working on is: http://aaroncmansfield.com/portfolio/
I'm not sure why the menu levels aren't dropping down when i click. I added a plugin to the wordpress site that allows me to add the proper code to the header to read the .js file too. Please help! Thanks

jQuery is not being aliased with $ on your site. You can do so by including an argument in your document.ready function.
Try this:
jQuery(function($){
$('#cssmenu > ul > li:has(ul)').addClass("has-sub");
...
});

Submenu stay open on menu click

I have a problem with js menu code. first let me explain what I try to do.
I have a menu with some items containing a submenu. The submenu's should open when a parent is clicked and contains submenu's, and when traveling to another page (from the item clicked, for example a parent of submenu item), the submenu should remain active and visible.
Now when I click on a parent item the submenu quickly blinks but is closed even as fast as it opens. I want the submenu to remain open when clicked on a parent that has a submenu, so users can easily navigate.
So, here is the code I have so far:
<div id="topnav">
<ul>
<li>
Home
</li>
<li>
Over Meves
<ul class="submenu">
<li>Historie</li>
<li>Onze mensen</li>
<li>Werkzijze</li>
</ul>
</li>
<li>
Disciplines
<ul class="submenu">
<li>Klimaatbeheersing</li>
<li>Elektrotechniek</li>
<li>Sanitaire techniek</li>
<li>Energiebesparingstechniek</li>
<li>Bouwfysica en geluid</li>
<li>Diensten energiebesparing</li>
</ul>
</li>
<li>
Expertise
<ul class="submenu">
<li>Woningbouw & Utiliteit</li>
<li>Zorg & Welzijn</li>
<li>Milieu & Energie</li>
<li>Beheer & Onderhoud</li>
<li>EPA & EPC</li>
<li>Legionella beheersing</li>
</ul>
</li>
<li>
Contact
<ul class="submenu">
<li>Adres & route</li>
<li>Werken bij</li>
</ul>
</li>
</ul>
</div>
The javascript:
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
}
function jsddm_close()
{
if(ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function()
{
$('#topnav > ul > li').bind('click', jsddm_open)
$('#topnav ul li a.suba').click(function(e){
if ($(this).attr('class') != 'active'){
$('#topnav ul li a.suba').removeClass('active');
$(this).addClass('active');
}
});
$('a').filter(function(){
return this.href === document.location.href;
}).addClass('active')
$("ul.submenu > li > a").each(function () {
var currentURL = document.location.href;
var thisURL = $(this).attr("href");
if (currentURL.indexOf(thisURL) != -1) {
$(this).parent("ul.submenu").css('display', 'block');
}
});
});
And the css:
#topnav ul
{
list-style: none;
padding: 0;
margin: 0;
}
#topnav ul li
{
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a
{
padding: 5px 15px;
color: #00537F;
text-decoration: none;
display: block;
font-weight: bold;
}
#topnav ul li a:link
{
color: #FFF;
text-decoration: none;
}
#topnav ul li a:visited
{
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover
{
color: #FFF;
text-decoration: underline;
}
#topnav ul li a.active
{
text-decoration: underline;
color: #FFF;
}
/*#topnav ul li:hover .submenu
{
display:block;
}*/
#topnav ul li ul.submenu
{
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 24px;
display: none;
background: #e0e0e0;
color: #00537F;
}
#topnav ul li ul.submenu a
{
display: inline;
color: #00537F;
padding: 4px 8px;
}
#topnav ul li ul.submenu li
{
border-right-width: 1px;
border-right-style: solid;
border-right-color: #00537F;
}
#topnav ul li ul.submenu li:last-child
{
border-right-style: none;
}
#topnav ul li ul.submenu a:link
{
color: #00537F;
}
#topnav ul li ul.submenu a:visited
{
color: #00537F;
}
#topnav ul li ul.submenu a:hover
{
text-decoration: underline;
color: #00537F;
}
#topnav ul li ul.submenu li.active
{
text-decoration: underline;
color: #00537F;
}
#topnav ul li ul.submenu a.active
{
text-decoration: underline;
color: #00537F;
}
Please help.
Edit
The submenu isn't showing when I load a parent page.
I've been playing with a code, but this is still not working:
$('#topnav a').each(function(){
var myHref= $(this).attr('href');
if( url.match( myHref)) {
$(this).addClass('active');
$(this).closest('ul').css('display', 'block');
}
});

Ok I found the answer. This will fix it:
$(document).ready(function()
{
$('#topnav ul li ul.submenu li a').click(function(e){
if ($(this).attr('class') != 'active'){
$('#topnav ul li a').removeClass('active');
$(this).addClass('active');
}
});
$('a').filter(function(){
return this.href === document.location.href;
}).addClass('active')
$("ul.submenu > li > a").each(function () {
var currentURL = document.location.href;
var thisURL = $(this).attr("href");
if (currentURL.indexOf(thisURL) != -1) {
$(this).parents("ul.submenu").css('display', 'block');
}
});
$('#topnav > ul > li > a').each(function(){
var currURL = document.location.href;
var myHref= $(this).attr('href');
if (currURL.match(myHref)) {
$(this).addClass('active');
$(this).parent().find("ul.submenu").css('display', 'block');
}
});
});