Akimi

オートナビブロックでメニュー作り。「class="nav-selected nav-path-selected"」などをうまく使うことができません・・・。

オートナビブロックでメニュー作りをしています。

例えば『Concrete5japan』のサイトでは、
自分が現在表示しているページのメニュー部分が、
赤い枠線で四角く囲まれていますよね。

それは、該当メニューのトップページだけでなく、
そのページの下層のページにも、
「このページは○○メニューページの下層ページですよ」というのがわかりやすいよう、
赤い枠線が表示されていて、
私もこれが使いたいのですが、うまく表示することができません。

例えば「Information」というトップページ自体には、
以下のようなソースが書かれているので、
class="nav-selected"にcssでデザインを指定すれば、
メニュー「Information」にデザインが表示されます。

<ul class="nav">
<li class="nav-path-selected"><a class="nav-path-selected" href="/cmstest/" >Home</a></li>
<li><a href="/cmstest/index.php/gallery/" >Gallery</a></li>
<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="/cmstest/index.php/information/">Information</a</li>
</ul>

ただ、「Information」ページの下層ページの方は、
以下のようなソースが書かれているので、
class="nav-path-selected"にcssでデザインを指定すると、
メニュー「Information」とメニュー「Home」の両方にデザインが表示されてしまい、
自分が今、Informationページの下層にいるのか、
Homeページの下層にいるのかが、こんがらがってしまいます。

<ul class="nav">
<li class="nav-path-selected"><a class="nav-path-selected" href="/cmstest/" >Home</a></li>
<li><a href="/cmstest/index.php/gallery/" >Gallery</a></li>
<li class="nav-path-selected"><a class="nav-path-selected" href="/cmstest/index.php/information/" >Information</a></li>
</ul>

『Concrete5japan』のページのように、
該当のトップページとその下層ページにだけデザインをつけるような方法をご存じの方がいらっしゃいましたら、
お教えいただけると嬉しいです。
初心者なため、おかしな質問をしていましたらすみません・・・。