Trouble With Jquery For Multi-level Dropdown

I've been working on the nav menu for a website that should have multiple levels. I'm having trouble with the JQuery in terms of having the correct drop downs appear on click. I'm

Solution 1:

Here is a working demo, though CSS needs to be fixed. It was a simple JQuery code, instead of toggleClass(), we needed to use children as there are nested menus:

$('.dropdown a').on('click', function(e) {
    e.preventDefault();
    var ullist = $(this).parent().children('ul:first');
    ullist.slideToggle();
});

body {
  margin: 0;
  padding: 0;
}

.show {
  display: block;
}

#main-bar {
  list-style-type: none;
  height: 50px;
}

#main-bar>li {
  float: left;
  border: 1px solid black;
  padding: 15px80px;
}

#main-bar>li>a {
  text-decoration: none;
}

#product-bar {
  //position: absolute;
  min-width: 1154px;
  border: 1px solid black;
  margin-left: -81px;
  margin-top: 15px;
  height: 50px;
  list-style-type: none;
  display: none;
}

#product-bar>li {
  float: left;
  padding: 15px25px;
}

#product-bar>li>a {
  text-decoration: none;
}

#clarinet-bar {
  //position: absolute;
  min-width: 1154px;
  border: 1px solid black;
  margin-left: -71px;
  margin-top: 17px;
  height: 50px;
  list-style-type: none;
  display: none;
}

#clarinet-bar>li {
  float: left;
  padding: 15px30px035px;
}

#clarinet-bar>li>a {
  text-decoration: none;
}

#saxophone-bar {
  //position: absolute;
  min-width: 1154px;
  border: 1px solid black;
  margin-left: -183px;
  margin-top: 17px;
  height: 50px;
  list-style-type: none;
  display: none;
}

#saxophone-bar>li {
  float: left;
  padding: 15px20px016px;
}

#saxophone-bar>li>a {
  text-decoration: none;
}

#flute-bar {
  //position: absolute;
  min-width: 1154px;
  border: 1px solid black;
  margin-left: -314px;
  margin-top: 17px;
  height: 50px;
  list-style-type: none;
  display: none;
}

#flute-bar>li {
  float: left;
  padding: 15px110px;
}

#flute-bar>li>a {
  text-decoration: none;
}

#oboe-bar {
  //position: absolute;
  min-width: 1154px;
  border: 1px solid black;
  margin-left: -372px;
  margin-top: 17px;
  height: 50px;
  list-style-type: none;
  display: none;
}

#oboe-bar>li {
  float: left;
  padding: 15px75px;
}

#oboe-bar>li>a {
  text-decoration: none;
}

#bassoon-bar {
  //position: absolute;
  min-width: 1154px;
  border: 1px solid black;
  margin-left: -456px;
  margin-top: 17px;
  height: 50px;
  list-style-type: none;
  display: none;
}

#bassoon-bar>li {
  float: left;
  padding: 15px70px0300px;
}

#bassoon-bar>li>a {
  text-decoration: none;
}

#recorder-bar {
  //position: absolute;
  min-width: 1154px;
  border: 1px solid black;
  margin-left: -560px;
  margin-top: 17px;
  height: 50px;
  list-style-type: none;
  display: none;
}

#recorder-bar>li {
  float: left;
  padding: 15px38px;
}

#recorder-bar>li>a {
  text-decoration: none;
}

#brass-bar {
  //position: absolute;
  min-width: 1154px;
  border: 1px solid black;
  margin-left: -669px;
  margin-top: 17px;
  height: 50px;
  list-style-type: none;
  display: none;
}

#brass-bar>li {
  float: left;
  padding: 15px19px015px;
}

#brass-bar>li>a {
  text-decoration: none;
}

#guitar-bar {
  //position: absolute;
  min-width: 1154px;
  border: 1px solid black;
  margin-left: -755px;
  margin-top: 17px;
  height: 50px;
  list-style-type: none;
  display: none;
}

#guitar-bar>li {
  float: left;
  padding: 15px90px;
}

#guitar-bar>li>a {
  text-decoration: none;
}

#piano-bar {
  //position: absolute;
  min-width: 1154px;
  border: 1px solid black;
  margin-left: -846px;
  margin-top: 17px;
  height: 50px;
  list-style-type: none;
  display: none;
}

#piano-bar>li {
  float: left;
  padding: 15px70px0320px;
}

#piano-bar>li>a {
  text-decoration: none;
}

#orchestral-bar {
  position: absolute;
  min-width: 1154px;
  border: 1px solid black;
  margin-left: -932px;
  margin-top: 17px;
  height: 50px;
  list-style-type: none;
  display: none;
}

#orchestral-bar>li {
  float: left;
  padding: 15px125px0115px;
}

#piano-bar>li>a {
  text-decoration: none;
}

#percussion-bar {
  position: absolute;
  min-width: 1154px;
  border: 1px solid black;
  margin-left: -1049px;
  margin-top: 17px;
  height: 50px;
  list-style-type: none;
  display: none;
}

#percussion-bar>li {
  float: left;
  padding: 15px80px070px;
}

#percussion-bar>li>a {
  text-decoration: none;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><nav><ulid="main-bar"><liclass="dropdown"><ahref="#">Product</a><ulid="product-bar"class="sub-menu"><liclass="dropdown"><ahref="#"class="test">Clarinet</a><ulid="clarinet-bar"class="sub-menu"><li><ahref="#">Bb Clarinet</a></li><li><ahref="#">Bass Clarinet</a></li><li><ahref="#">Eb Clarinet</a></li><li><ahref="#">Alto Clarinet</a></li><li><ahref="#">Contrabass Clarinet</a></li><li><ahref="#">Contra-Alto Clarinet</a></li><li><ahref="#">Basset Horn</a></li></ul></li><liclass="dropdown"><ahref="#">Saxophone</a><ulid="saxophone-bar"class="sub-menu"><li><ahref="#">Alto Saxophone</a></li><li><ahref="#">Tenor Saxophone</a></li><li><ahref="#">Baritone Saxophone</a></li><li><ahref="#">Soprano Saxophone</a></li><li><ahref="#">Sopranino Saxophone</a></li><li><ahref="#">Bass Saxophone</a></li><li><ahref="#">Contrabass Saxophone</a></li></ul></li><liclass="dropdown"><ahref="#">Flute</a><ulid="flute-bar"class="sub-menu"><li><ahref="#">Flute</a></li><li><ahref="#">Alto Flute</a></li><li><ahref="#">Bass Flute</a></li><li><ahref="#">Piccolo</a></li></ul></li><liclass="dropdown"><ahref="#">Oboe</a><ulid="oboe-bar"class="sub-menu"><li><ahref="#">Oboe</a></li><li><ahref="#">Oboe D'amore</a></li><li><ahref="#">English Horn</a></li><li><ahref="#">Bass Oboe</a></li><li><ahref="#">Piccolo Oboe</a></li></ul></li><liclass="dropdown"><ahref="#">Bassoon</a><ulid="bassoon-bar"class="sub-menu"><li><ahref="#">Bassoon</a></li><li><ahref="#">Contrabassoon</a></li></ul></li><liclass="dropdown"><ahref="#">Recorder</a><ulid="recorder-bar"class="sub-menu"><li><ahref="#">Alto Recorder</a></li><li><ahref="#">Tenor Recorder</a></li><li><ahref="#">Soprano Recorder</a></li><li><ahref="#">Bass Recorder</a></li><li><ahref="#">Great Bass Recorder</a></li><li><ahref="#">Piccolo Recorder</a></li></ul></li><liclass="dropdown"><ahref="#">Brass</a><ulid="brass-bar"class="sub-menu"><li><ahref="#">Trumpet</a></li><li><ahref="#">Trombone</a></li><li><ahref="#">Cornet</a></li><li><ahref="#">French Horn</a></li><li><ahref="#">Tuba</a></li><li><ahref="#">Flugelhorn</a></li><li><ahref="#">Euphonium</a></li><li><ahref="#">Mellophone</a></li><li><ahref="#">Alto Horn</a></li><li><ahref="#">Tenor Horn</a></li><li><ahref="#">Baritone Horn</a></li></ul></li><li><ahref="#">Guitar</a><ulid="guitar-bar"class="sub-menu"><li><ahref="#">Electic Guitar</a></li><li><ahref="#">Acoustic Guitar</a></li><li><ahref="#">Classical Guitar</a></li><li><ahref="#">Bass Guitar</a></li></ul></li><li><ahref="#">Piano</a><ulid="piano-bar"class="sub-menu"><li><ahref="#">Piano</a></li><li><ahref="#">Keyboard</a></li></ul></li><li><ahref="#">Orchestral</a><ulid="orchestral-bar"class="sub-menu"><li><ahref="#">Violin</a></li><li><ahref="#">Viola</a></li><li><ahref="#">Cello</a></li><li><ahref="#">Bass</a></li></ul></li><li><ahref="#">Percussion</a><ulid="percussion-bar"class="sub-menu"><li><ahref="#">Keyboard Percussion</a></li><li><ahref="#">Mallet Percussion</a></li><li><ahref="#">Marching Percussion</a></li><li><ahref="#">General Percussion</a></li></ul></li></ul><!--closes product-bar--></li><!--closes product list item that is holding all the products--><li><ahref="#">Shop By Brands</a></li><li><ahref="#">How to Order</a></li><li><ahref="#">Quick Order</a></li><li><ahref="#">About Us</a></li></ul><!--closes main-bar--></nav>

Solution 2:

The main reason for your problem is that the submenu tags not only have the class .sub-menu which is addressed you your jQuery, but they also have IDs, and the CSS rules for these IDs contain display: none which has more specifity that a class. So in order to overwrite that you either can use !important on your .show class (which is not that good)…

.show {
  display: block !important;
}

…or (better) remove the display: block from the CSS rules for those IDs (saxophone-bar , flute-bar etc.)