Is there a way to underline a active menu item in a Spry Menu Bar without underlining any of the other menu items?

 

I have added a Spry Menu Bar along the top of my web page and I want the bottom part of the box to have a border to indicate the page that you are on.

Does this make sense?

Here is a link to the page-

http://www.deverilljenkins.co.uk/test.html

 

So for instance, when you are on the home page the word Home is underlined.

 

Many thanks

Add this to your CSS...

ul.MenuBarHorizontal a:active {text-decoration: underline}

That will underline the link text when it's in the active state

you could use a class

 

eg when on the home page

 

<li><a href="#" class="current">Home</a></li>

 

on your practice page

 

<li><a class="MenuBarItemSubmenu current" href="#">Practice</a>
         <ul class="">
           <li><a class="" href="practice/profile.html">Profile</a></li>
           <li><a class="" href="practice/directors.html">Directors</a></li>
           <li><a class="" href="practice/services.html">Services</a></li>
         </ul>
     </li>

 

and the css

 

.current{border-bottom:2px solid #000;}

 

if you want the underline to be just the width of the text you will need to change in ul.MenuBarHorizontal a

padding:0.5em 0.75em 0.2em;

to

margin:0.5em 0.75em 0.2em

Hi

I think I explained that wrong - what i need it to do is create a border at the bottom of the box that holds the menu text so that only the one item in the menu is underlined (with the underline created by the border).

This would indicate the page that you are on.

Maybe it's not actually possible to only do this to one menu item in a Spry Menu bar.

Does this help?

#MenuBarHorizontal li a:active {border-bottom: 1px solid black:}

Mteam - you are a genius!

you must have been writing your reply when I was writing mine.

What you have given me above works perfectly.

Thanks so much