Help with <li> link class via PHP

[Zola]

Hi all

 

I have a small issue with a site I am building. For the main menu I use an SSI for ease of updating every page at once. When the user clicks an item and goes to a page I want to have that option in the menu highlighted / different colour, to show what page they are on. 

 

This works perfectly for single menu items like this:

<li <?php if( $page=='index') echo 'class="active"'; ?> ><a href="index.php">Home</a></li>

I use $page in the respective page HTML and it links up to the menu.

 

However, some of the options have drop down menu items. I would like to highlight the top level item on the menu even when a sub section item is selected. In its current state the drop down menu item is highlighted, but not the top. 

<li <?php if ($page=='ci') echo 'class="active"'; ?>>
    <a href="ci.php" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">CI <i class="fa fa-angle-down"></i></a>
              <ul class="dropdown-menu">
                 <li <?php if ($page=='ci1') echo 'class="active"'; ?>> <a href="ci.php">xxxx</a></li>
                 <li <?php if ($page=='reasons') echo 'class="active"'; ?>> <a href="reasons.php">xxxx</a></li>
                 <li <?php if ($page=='small_faq') echo 'class="active"'; ?>> <a href="small-faq.php">faq</a></li>
              </ul>
</li>

Even when I change the sub levels to be the same as the top level, the top level item will not change colour. I have no idea why.

 

Can anyone see what I am doing wrong?

[Zola]

Bump, any help would be really appreciated :s

[jcbones]

This is a css problem, and not a PHP one.  There are guru's that can do amazing things with css, however, I can only do basics without looking a lot of stuff up.  I will try and divulge a little bit of help, but I mention these things so that you can take what I say and research it.  It may or may not be incorrect.

 

CSS has priorities.  Which means that styles written in certain scopes override other styles.  For instance, a style for an id attribute overrides styles for class attributes. 

Edit: scratch that:

You may need to study your stylesheet to see if the dropdown styles are marked !important.

[jcbones]

Alright, you made me read up on some things.  You could create an inline style, that would override your stylesheet, unless it is marked !important.

[Zola]

I think I got it now, thanks!