Highlight menu parent - CSS & PHP issue - php

Question

I am drafting a new website, and having some issues with highlighting the parent page when on a child page. I will explain what system I am using, and then what I have tried.
For a single top level item, I use:
PHP:
<?php $currentPage = basename($_SERVER['SCRIPT_NAME']); ?>
at the top of the page, followed by:
<ul>
<?php echo "\n"; if ($currentPage == '#') { ?><li class="on">News</li><?php } else { ?><li class="off">News</li><?php } ?>
</ul>
And for drop downs:
<li>About
<ul>
<?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">Club</li><?php } else { ?><li class="off">Club</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'coaches.php') { ?><li class="on">Coaches</li><?php } else { ?><li class="off">Coaches</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'officials.php') { ?><li class="on">Officials</li><?php } else { ?><li class="off">Officials</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'management.php') { ?><li class="on">Management Team</li><?php } else { ?><li class="off">Management</li><?php } ?>
</ul>
</li>
</ul>
Styled with:
CSS:
.nav {
width: 990px;
height: 60px;
}
.nav ul {
margin-left: 0px;
padding-left: 0px;
width: auto;
}
.nav ul li {
float: left;
list-style-type: none;
position: relative;
}
.nav ul li a {
color: #666;
font-size: 14px;
text-decoration: none;
background-color: #fff;
display: block;
height: 36px;
width: 110px;
text-align: center;
line-height: 36px;
padding-bottom: 0px;
}
a.none {
cursor: default;
}
.nav li:hover > a {
background-color: #181d63;
text-decoration: none;
color: #fff;
}
.nav ul ul {
position: absolute;
visibility: hidden;
display: block;
}
.nav li ul li a {
background-color: #e5e5e5;
color: #000;
top: 38px;
text-align: center;
font-size: 12px;
}
.nav li ul li a:hover {
background-color: #CCC;
color: #000;
top: 38px;
text-align: center;
}
.nav li:hover ul {
visibility: visible;
background-color: #181d63;
}
.on {
color: #fff;
font-size: 14px;
text-decoration: none;
background-color: #181d63;
display: block;
height: 36px;
width: 110px;
text-align: center;
line-height: 36px;
cursor: default;
}
.off {
}
This works well and highlights the page that is open, be that in the top level or drop down. I would like to make it so that being on any of the child pages will also highlight the top level parent.
I have tried:
PHP:
<ul>
<li><?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">About</li><?php } else { ?><li class="off">About<?php } ?>
<ul>
<?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">Club</li><?php } else { ?><li class="off">Club</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'coaches.php') { ?><li class="on">Coaches</li><?php } else { ?><li class="off">Coaches</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'officials.php') { ?><li class="on">Officials</li><?php } else { ?><li class="off">Officials</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'management.php') { ?><li class="on">Management Team</li><?php } else { ?><li class="off">Management</li><?php } ?>
</ul>
</li>
</ul>
And adding the following to the css:
CSS:
a.drop {
}
a.drop:hover {
visibility: visible !important;
background-color: #181d63;
}
At this point, I run in to two things.
Being on the 'club.php' page now highlights the parent.
I'm not sure how to add to the php to incorporate all it's child pages. ('page1', 'page2') doesn't seem to work.
Although the parent is now highlighted, that menu item no longer drops down.
I think I need to create an .onchild condition that when applied to a top level parent, still allows a drop down, but I'm really quite stuck on how to go about this, and seem to be deviating ever further from my original code! I am keen to keep this all in PHP and CSS without resorting to jquery if possible.

Answer 1

Why not add child in parent 'if'?
<ul>
<li><?php echo "\n"; if ($currentPage == 'club.php' || $currentPage == 'coaches.php' || $currentPage == 'officials.php' || $currentPage == 'management.php') { ?><li class="on">About</li><?php } else { ?><li class="off">About<?php } ?>
<ul>
<?php echo "\n"; if ($currentPage == 'club.php') { ?><li class="on">Club</li><?php } else { ?><li class="off">Club</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'coaches.php') { ?><li class="on">Coaches</li><?php } else { ?><li class="off">Coaches</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'officials.php') { ?><li class="on">Officials</li><?php } else { ?><li class="off">Officials</li><?php } ?>
<?php echo "\n"; if ($currentPage == 'management.php') { ?><li class="on">Management Team</li><?php } else { ?><li class="off">Management</li><?php } ?>
</ul>
</li>
</ul>
Edit: Or you could use in_array
$array = array('club.php', 'coaches.php', 'etc');
if(in_array($currentPage, $array)) { /* do code */ }