Controlling the active menu item

Question

I'm having problems understanding the menu system. I have an hosting node that has 3 pages: https://beta.ulyssis.be/hosting/

Menu Hook

function packages_menu() {
  $item['hosting']= array(
    'title' => 'Start',
    'type' => MENU_NORMAL_ITEM,
    'description' => 'Dit maakt ons ULYSSIS!',
    'page callback' => '_hosting_page_main',
    'access callback' => TRUE,
    'menu_name' => 'main-menu',
  );

  $item['hosting/bekijk']= array(
    'title' => 'Features',
    'type' => MENU_DEFAULT_LOCAL_TASK,
    'weight' => 1,
  );

  $item['hosting/kortingen']= array(
    'title' => 'Kortingen',
    'type' => MENU_LOCAL_TASK,
    'description' => 'Deze groepen krijgen kortingen',
    'page callback' => '_hosting_page_discount',
    'access callback' => TRUE,
    'menu_name' => 'main-menu',
    'weight' => 3,
  );

  $item['hosting/pakketten']= array(
    'title' => 'Vergelijk',
    'type' => MENU_LOCAL_TASK,
    'description' => 'Vergelijk onze pakketten met elkaar!',
    'page callback' => '_hosting_page_compare',
    'access callback' => TRUE,
    'menu_name' => 'main-menu',
    'weight' => 4,
  );

  $item['hosting/bestellen']= array(
    'title' => 'Bestel Nu!',
    'type' => MENU_LOCAL_TASK,
    'page callback' => '_hosting_page_order',
    'access callback' => TRUE,
    'menu_name' => 'main-menu',
    'weight' => 5,
  );

  return $item;
}

Problem When navigating trough these pages, you'll notice that the top hosting menu item doesn't stay as 'active' menu item.

I'm having the same problem with other things, like when reading documentation, that the documentation menu item isn't active to. So I guess I'm not using the menu system as it should or that I'm missing some kind of knowledge about this.

Does anybody know what I'm doing wrong?

Answer 1

The "Hosting" li item is only active if you're on the Hosting page. If you're on a child page of "Hosting" won't be the "active" item, it will be the "active-trail".

You can change your navigation CSS to make the link look properly by changing .active to .active-trail:

.navigation li a:hover, .navigation .active a {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #E99719;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

to

.navigation li a:hover, .navigation .active-trail a {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #E99719;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

What might have confused you is that the link itself has a class of active, but its li wrapper does not.