How to add custom class to child <ul> in menu tree

Don't know how to add a class to the 'ul' element but if you can do your styling with a class added to the 'li' sub menu elements this may help. Assuming Drupal 7

1. Copy the theme_menu_link function in its entirety from /includes/menu.inc to your themes template.php file.
2. Replace the word 'theme' with the name of your theme (e.g. my_custom_theme_menu_link)
3. Add the line $element['#below'][key($element['#below'])]['#attributes']['class'][] = 'my_sub_class'; to the if ($element['#below']) section

An example below:

function my_custom_theme_menu_link(array $variables) {
  $element = $variables['element'];
  $sub_menu = '';

  if ($element['#below']) {
    <-- the next line has been added to the function  --->  
    $element['#below'][key($element['#below'])]['#attributes']['class'][] = 'my_sub_class';

    $sub_menu = drupal_render($element['#below']);
  }
  $output = l($element['#title'], $element['#href'], $element['#localized_options']);
  return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

This will add the class "my_sub_class" to all 'li' elements that are part of the sub menu. Hope this helps.

Ed

HI

Why you are looking for different class in submenu's UL element ?

After a couple of hours searching I found the template_menu_tree function and after reading about it and printing the value of the $variables variable I had the idea to add an unique keyword and then look for it with a simple match. If the match was true then I will add the variation to the keyword like from "menu" to "sub-menu".

<?php
function YOUR_THEME_menu_tree($variables) {
  if (preg_match("/\bKEYWORD-submenu\b/i", $variables['tree'])){
    return '<ul class="menu KEYWORD-menu">' . $variables['tree'] . '</ul>';
  } else {
    return '<ul class="menu KEYWORD-submenu">' . $variables['tree'] . '</ul>';
  }
}
?>

Thank you,
Emil

My CSS3 rough draft notes (partial :o))

CSS 3 - Selectors - Structural - Nth-type pseudo-class.

This CSS3 pseudo-class selector matches elements
on the basis of their positions within a parent element’s list
of child elements.

Accepts an argument, N, which can be:

- keyword
- number
- number expression of the form an+b.

:nth-child(N)
:nth-last-child(N)
:nth-of-type(N)
:nth-last-of-type(N)

Eg. - partial.
:nth-child(even)
:nth-child(odd)

Format.
:nth-child(an + b)
a - Every a-th (optional)
n - Always 'n'?? - Base value.
b - Offset. (optional) Where the count begins.

- Single item. (Eg. The seventh.)
li:nth-child(7) {
color: red;
}

nth-child

(2n)
- Every other (even)
li:nth-child(2n) {
color: red;
} - Starting at zero.
(Zero implied as default.)

(2n+1)
- Every other starting at 1 (odd).
li:nth-child(2n+1) {color: red;
}

(3n+5)
- Start with the 5th item and
every 3rd item there-after.
li:nth-child(3n+5) {color: red;}

(-2n+8)
- Start at eighth, and back
every 2nd.
li:nth-child(-2n+8) {
color: red;
}

(3n-1)
- Starting at -1; every third forward.
li:nth-child(3n-1) {
color: red;
}

(1n+4)
- 4th and each there-after.
li:nth-child(1n+4) {
color: red;
}

nth-last-child.

:nth-last-child(N) matches elements
that are followed by N-1 siblings
in the document tree.

(-n+4)
- Last four items.
li:nth-last-child(-n+4) {
color: red;
} Start from end of list and
work backwards: Starting at +4th back,
and in the (-an) opposite direction;
every nth. (Eg. n = 1n = every-one)

(1n+4)
- All except last 3.
li:nth-last-child(1n+4) {
color: red;
} Start from end of list and
work backwards: Starting at
4th from end, and every 1 in
that backwards direction.

Multiple nth's.

Both ends..
nth-..(-1n+3), nth-last-..(-1n+3)
- First three and last three.
li:nth-child(-1n+3),
li:nth-last-child(-1n+3) {
color: red;
}

Middle ground..
Daisy:Chain:
nth-..(1n+4):nth-last-..(1n+4)
- All except first three and
last three.
li:nth-child(1n+4):nth-last-child(1n+4) {
color: red;
}
...or similarly...
li:nth-last-child(1n+4):nth-child(1n+4) {
color: red;
}