Template menu and submenu active

[andreabiraghi]

Good morning to everyone...
I've a problem that is making me crazy for lot of days, I really cannot understand how to solve it... 

I've made this website using WebsiteBaker and modifing the Blueleaves template... www.peg-one.com

The problem is...
in the top menu, when I select a page that don't have sub-pages, the link is bue color and show to the user the "active page". When I move into a section that have subpages (for example philosophy) the top menu link not become blue as active page, but the sub-page become blue...

How can I solve this problem? I would like that the top menu, and the sub menu mantain the blue color when you visit the page...
So if the user is visiting Philosophy - Il team... the "philosopy" link in the top menu and the "il team" link in the sub menu should be blue... showing that is the active section/page

I cannot undestand if this problem is related to css or to template... I'm posting the code form the template and from the css...

TEMPLATE TOP MENU

Code:

<ul id="nav"><?php show_menu(1,0,1,true,'<li>[a][menu_title][/a]</li>','','','','','class="on"'); ?></ul>

TEMPLATE SUB-MENU

Code:

<div class="sottomenu">
            <?php ob_start();     // start output buffer
            show_menu(1,1,-1,true,'<li>[a][menu_title][/a]<br /><br /><li/>','','','','','class="on"');    // call menu
            $foo=ob_get_contents();    // put outputbuffer in $foo
            ob_end_clean();             // clear outputbuffer
            if ($foo<>"") {  // some code to execute cause there is some block
              echo $foo; 
                                         // show the block (as saved in $foo)
              } else { // some code for no info
            }
            ?>
        </div>

CSS

Code:

#nav {
    margin-top: 115px;
    background: #fff;
    float: left;
    height: 20px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    }
#nav li {
    list-style-type: none;
    display: inline;
   
    }        
#nav li a {
    text-decoration: none;
    color: #888;
    text-transform: uppercase;
    border-bottom: 0;
    padding: 0px 10px 0px 10px;
    font-size: 12px;
    float: left;
   
    }
#nav li a:hover { color: #003979;  }
#nav li a.on { color: #003979;  }

.sottomenu {
    width: 320px;
    margin-top: 15px;
    }


.sottomenu li {
    list-style-type: none;
    letter-spacing: 1px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    line-height: 12px;
   
}

.sottomenu li a { color: #888; }
.sottomenu li a:hover { color: #003979;  }
.sottomenu li a.on {  color: #003979; }

Thanks to everybody that can help me... you can really save my life

Andrea


 

[kweitzel]

You are using the "Menulink" as top level Navigation in these described cases, right? It is actually working as designed, since the menulink can never be an active page since it directly redirects to another page. In your case that is the first page in the structure below.

cheers

Klaus

[andreabiraghi]

You are using the "Menulink" as top level Navigation in these described cases, right? It is actually working as designed, since the menulink can never be an active page since it directly redirects to another page. In your case that is the first page in the structure below.

cheers

Klaus

Thanks Klaus for your fast answer.
yes, I'm using Menu link... and I understand now...

So, do you have any idea how can I do? Because when the user click on a top-menu section I'd like he directly goes to the first link of the sub-menu, without passing between any other page...

thanks
Andrea