ul li a affecting ul li ul li a

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.

If you could include the HTML and a jsfiddle of the code it would be easier for us to help. — David Passmore, Dec 02 '12 at 23:55
It might be worth taking a look at SMACSS (http://smacss.com/), which discusses just this type of thing. At some point layering on the specificity in your css rules becomes a fool's game. — ultranaut, Dec 03 '12 at 00:11

score 3 · Accepted Answer · edited May 23 '17 at 12:18

3

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?

edited May 23 '17 at 12:18

Community

1
1

answered Dec 02 '12 at 23:57

3dgoo

15,716
6
46
58

score 2 · Answer 2 · answered Dec 02 '12 at 23:57

The selector ul li a matches any <a> tag at any depth in a <li> tag in a <ul> tag - even if, e.g., the <li> is actually inside an <ol> tag that is inside the outer <ul>:

<ul>
    <li>
        <ol>
            <li><a>Foo</a></li>
        </ol>
    </li>
</ul>

A selector ul li has two matches for this markup as there are two <li> tags inside that <ul>. However, to select only direct childrens, you can use >, i.e. ul > li will select only the first <li> element but not the second one as that one is not a direct child of the <ul>.

score 2 · Answer 3 · answered Dec 02 '12 at 23:58

p span means looks for a span element that lies within a p element, regardless of whether it is a direct descendant or not.

That is why, ul li a is also affecting a a that is nested like this: ul > li > ul > li > a.

You should use the child selector ul > li > a.

score 1 · Answer 4 · answered Dec 03 '12 at 00:00

The selector ul li a means "an a that is a descendant of an li that is a descendant of a ul. Anytime an a has an li and ul as ancestors, it will apply. To select only direct children, use the > operator. So .jquerycssmenu > ul > li > a and .jquerycssmenu > ul > li > ul > li > a, or something like that.

ul li a affecting ul li ul li a

4 Answers4