I'm trying to understand the difference between the "deeper" and "parent" class names applied to parent li elements in a default Joomla 2.5 menu. They always seem to be applied together? It is always "deeper parent", never one or the other as far as I can see?

For example:

<ul class="menu">
<li class="item-108 deeper parent"><a href="/menu1" >Menu1</a>
    <li class="item-110"><a href="/menu1/sub11" >Sub11</a></li>
    <li class="item-121"><a href="/menu1/sub12" >Sub12</a></li>
    <li class="item-122"><a href="/menu1/sub13" >Sub13</a></li>
<li class="item-109 deeper parent"><a href="/menu2" >Menu2</a>
    <li class="item-130"><a href="/menu2/sub21" >Sub21</a></li>
<li class="item-111 active deeper parent"><a href="/menu3" >Menu3</a>
    <li class="item-118"><a href="/menu3/sub31" >Sub31</a></li>
    <li class="item-120 current active"><a href="/menu3/sub32" >Sub32</a></li>
    <li class="item-131"><a href="/menu3/sub33" >Sub33</a></li>
<li class="item-112"><a href="/menu4" >Menu4</a></li>


  1. Why do the parent lis have both "deeper" and "parent" classes applied when there is a sub menu? Why not simply "parent"?

  2. Is there a situation when one is applied and the other isn't? ie. when perhaps "deeper" is omitted?

1 Answer 1

  • .deeper is applied when the menu item has a submenu (item)
  • .parent is applied if this menu item is parent of another menu item

If you have a menu showing all levels then both classes are applied to a parent menu item. But sometimes you want to show just the first level in your main menu and show the other levels in a side menu, for example. .deeper is then not applied on the main menu because it has only 1 level.

This edited screenshot should help understanding the classes better:

menu CSS classes

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.