Question

If the title is hard to understand, let me explain…

I have a css / jquery toggle menu. When you press the “+” sign it gets bigger, when you press the “-” sign it gets smaller. I made the padding, margin and height of several elements change on toggle / click. The menu is full of links up top, then when you hover over the links it reveals more sub-links. The main links up top use the css code:

/*Top level menu link items style*/
.jquerycssmenu ul li a{
    display: block;
    background: none; /*background of tabs (default state)*/
    padding: 5px 18px 32px 18px;
    margin-right: 3px; /*spacing between tabs*/
    color:#fff;
    text-decoration: none;
}

The sub menus use this css code:

/* Sub level menu links style */
.jquerycssmenu ul li ul li a{
    font: normal 13px Verdana;
    width: 320px; /*width of sub menus*/
    height:60px;
    background: black;
    color: white;
    margin: 0;
    border-top-width: 0;
    border-bottom: 1px solid #2c2c2c;
    padding:20px 0px 0 20px;
}

I have set up the JQuery so sub menus padding shrinks via toggle… I did it like so:

$(document).ready(function(){   
  $('.gh-gallink').toggle(
    function() {
    $('.jquerycssmenu ul li ul li a').animate({
      height: "40px",
      padding: "10px 0px 0 20px"
    }, 100);
    $(this).text('+');
  },

  function() {
    $('.jquerycssmenu ul li ul li a').animate({
      height: "60px",
      padding: "20px 0px 0 20px"
    }, 100);
    $(this).text('-');

  });
});

This works perfectly fine! I then tried to enter in the JQuery for the main menus (.jquerycssmenu ul li a) I did it like so:

$(document).ready(function(){   
  $('.gh-gallink').toggle(
    function() {
    $('.jquerycssmenu ul li ul li a').animate({
      height: "40px",
      padding: "10px 0px 0 20px"
    }, 100);
    $('.jquerycssmenu ul li a').animate({
      paddingBottom: "8px"
    }, 100);
    $(this).text('+');
  },

  function() {
    $('.jquerycssmenu ul li ul li a').animate({
      height: "60px",
      padding: "20px 0px 0 20px"
    }, 100);
    $('.jquerycssmenu ul li a').animate({
      paddingBottom: "32px"
    }, 100);
    $(this).text('-');

  });
}); 

For some reason, the ul li a (main menu) effects the ul li ul li a (sub menu). As soon as you toggle the menu, the padding-bottom for the sub menus is the same for the main menu.. 32px when bigger and 8px when smaller.. when the padding-bottom should be 0px when bigger and 0px when smaller like listed above.

Why is ul li a (the main menu links) effecting ul li ul li a (the sub menu links)? And how can I fix this CSS / JQuery issue so that the main menu links doesn’t effect the sub menu links.

Just a quick note:
I can sucesfully edit the ul li a code without it affecting the ul li ul li a code.. in CSS. It’s just when I apply the codes to JQuery is when things mess up.

Answer 1

You shoud use this:

`.jquerycssmenu > ul > li > a`

Instead of this:

`.jquerycssmenu ul li a` 

Here is an explanation of the > css selector:
What does the ">" (greater-than sign) CSS selector mean?