Active selected link not working

HTML & CSS
1

can someone help with this, the active (selected) link is not working here is the css and html.
http://hospital.gosh.org/medical-conditions/
Thanks


#menu-outer {width:1038px; }

#menu-inner {
width: 97.5%;
height: 85px;
background: url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/nav_bar_bg.gif") no-repeat 45% 13px #fff !important;
padding-top:15px;
}


#menu-inner ul {list-style-type: none; }
#menu-inner li {float:left; text-align: center; color:#00aeef;}

.custom-menu{width:938px; height:55px; margin-top:-55px; padding:0!important; float:right; margin-left:40px; }
.custom-menu li{ margin:0!important; padding:0!important;}

a.menu-link:link, a.menu-link:visited { color: #00aeef; text-decoration: none;}
a.menu-link:hover, a.menu-link:active { color: #fff; background:url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/navigation/nav_hover_bg.gif") repeat-x scroll transparent; text-decoration: none;}

.fm-panel-title:link, .fm-panel-title:visited { color: #00aeef; text-decoration: none; display: block; width:85px; }
.fm-panel-title:hover, .fm-panel-title:active { color: #fff; text-decoration: none; display: block; }


a.menu-home:link, a.menu-home:visited{background:url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/navigation/home_icon_big.gif") no-repeat scroll transparent; padding:0 0 0 0; margin:0 0 0 20px; height:55px; width:55px; display: block; }
a.menu-home:hover,a.menu-home:active{background:url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/navigation/home_hover_big.gif") no-repeat scroll transparent; height:55px; width:55px;}
a.menu-home:focus{background:url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/navigation/home_hover_big.gif") no-repeat scroll transparent; height:55px; width:55px;}

.fn-panel-alpha a:link, .fn-panel-alpha a:visited  {padding:12px 6px 18px 8px; margin-left:-40px;}
.fn-panel-alpha a:hover, .fn-panel-alpha a:active {background:url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/navigation/nav_hover_bg.gif") repeat-x scroll transparent; text-decoration: none;}



.fn-panel-beta a:link, .fn-panel-beta a:visited  {padding:12px 8px 18px 8px; }
.fn-panel-beta a:hover, .fn-panel-beta a:active {background:url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/navigation/nav_hover_bg_p_and_v.gif") repeat-x scroll transparent; }

.fn-panel-gamma a:link, .fn-panel-gamma a:visited  {padding:15px 10px 25px 7px; }
.fn-panel-gamma a:hover, .fn-panel-gamma a:active {background:url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/navigation/nav_hover_bg_teen.gif") repeat-x scroll transparent; }

.fn-panel-delta a:link, .fn-panel-delta a:visited  {padding:15px 10px 25px 7px;}
.fn-panel-delta a:hover, .fn-panel-delta a:active {background:url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/navigation/nav_hover_bg_children.gif") repeat-x scroll transparent; }

.fn-panel-epsilon a:link, .fn-panel-epsilon a:visited  {padding:8px 8px 18px 8px;}
.fn-panel-epsilon a:hover, .fn-panel-epsilon a:active {background:url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/navigation/nav_hover_bg.gif") repeat-x scroll transparent; }

.fn-panel-zeta a:link, .fn-panel-zeta a:visited  {padding:15px 10px 25px 7px;}
.fn-panel-zeta a:hover, .fn-panel-zeta a:active {background:url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/navigation/nav_hover_bg.gif") repeat-x scroll transparent; }

.fn-panel-eta a:link, .fn-panel-eta a:visited  {padding:8px 6px 25px 8px; }
.fn-panel-eta a:hover, .fn-panel-eta a:active {background:url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/navigation/nav_hover_bg.gif") repeat-x scroll transparent; }

.fn-panel-theta a:link, .fn-panel-theta a:visited  {padding:15px 10px 25px 7px;}
.fn-panel-theta a:hover, .fn-panel-theta a:active {background:url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/navigation/nav_hover_bg.gif") repeat-x scroll transparent; }

.fn-panel-iota a:link, .fn-panel-iota a:visited  {padding:14px 0 0 0; height:55px; width:101px; }
.fn-panel-iota a:hover, .fn-panel-iota a:active {background:url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/navigation/news_bg_tab_over.gif") no-repeat;}

.fm-panel-list { text-align: left;  left: -999em; z-index: 10; list-style-type: none; padding-bottom: 0 !important; margin: 0; border: none; padding: 0 0 15px 0 !important; display: block; height: auto; position: absolute; background-color:#e7f7fe; border:1px solid #00aeef;}/*position: absolute;*/


div.showList ul, .footer-menu-panel ul.showList, .footer-menu-panel:hover ul { left: auto; }


.fm-panel-item { list-style-type: none; width: 181px; margin: 0 !important; border: 0; padding-left: 0px;  text-align: left; }

a.fm-panel-item:link, a.fm-panel-item:visited { text-decoration: none; display: block; padding: 6px 1px 5px 5px; width: auto; color:#00aeef; }

a.fm-panel-item:focus, a.fm-panel-item:hover, a.fm-panel-item:active { color: #fff; text-decoration: none; background: #00aeef; border-top: none; padding: 6px 1px 5px 5px; width: auto; }

span.fm-panel-link-inner {display: block; }

.fn-panel-alpha { width: auto; }
.fn-panel-alpha ul ul { width: 183px; margin-left:-40px; margin-top:-3px;}
.fn-panel-alpha ul ul li.fm-panel-item { width: 183px; float: left; display: block; }

.fn-panel-beta { width: auto; }
.fn-panel-beta ul ul { width: 183px; margin-left:0; margin-top:-3px;}
.fn-panel-beta ul ul li.fm-panel-item { width: 183px; float: left; display: block; }

.fn-panel-gamma { width: auto; }
.fn-panel-gamma ul ul { width: 183px; margin-left:0;}
.fn-panel-gamma ul ul li.fm-panel-item { width: 183px; float: left; display: block; }

.fn-panel-delta { width: auto; }
.fn-panel-delta ul ul { width: 183px; margin-left:0;}
.fn-panel-delta ul ul li.fm-panel-item { width: 183px; float: left; display: block; }

.fn-panel-epsilon { width: auto; }
.fn-panel-epsilon ul ul { width: 183px; margin-left:0;}
.fn-panel-epsilon ul ul li.fm-panel-item { width: 183px; float: left; display: block; }

.fn-panel-zeta { width: auto; }
.fn-panel-zeta ul ul { width: 183px; margin-left:0;}
.fn-panel-zeta ul ul li.fm-panel-item { width: 183px; float: left; display: block; }

.fn-panel-eta { width: auto; }
.fn-panel-eta ul ul { width: 183px; margin-left:0; margin-top:-6px;}
.fn-panel-eta ul ul li.fm-panel-item { width: 183px; float: left; display: block; }

.fn-panel-theta { width: auto; }
.fn-panel-theta ul ul { width: 183px; margin-left:0;}
.fn-panel-theta ul ul li.fm-panel-item { width: 183px; float: left; display: block; }

.fn-panel-iota { width: auto; }
.fn-panel-iota ul ul { width: 183px; margin-left:-80px; margin-top:-13px;}
.fn-panel-iota ul ul li.fm-panel-item { width: 183px; float: left; display: block;}

<div id="menu-outer">
	<div id="menu-inner">
   <a href="/home/" class="menu-link menu-home" title="Home"><span class="menu-outer"><span class="menu-inner">&nbsp</span></span></a>
    <div id="<Top Navigation>" class="style-element-outer custom-menu custom-menu-<Top Navigation>"><div class="style-element-inner"><div class="style-element-body clear"><div class="footer-menu-panel fn-panel-alpha selected-alpha">
  <ul>
    <li class="fm-panel-title">
      <a href="/medical-conditions/" class="fm-panel-title" title="Medical conditions">
        <span class="fm-panel-title">Medical conditions</span>

      </a>
      <ul class="fm-panel-list">
        <li class="fm-panel-item">
          <a href="/medical-conditions/clinical-specialties/" class="fm-panel-item" title="Clinical specialties">
            <span class="fm-panel-link-inner">Clinical specialties</span>
          </a>
        </li>
        <li class="fm-panel-item">

          <a href="/medical-conditions/medicines-information/" class="fm-panel-item" title="Medicines information">
            <span class="fm-panel-link-inner">Medicines information</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/medical-conditions/procedures-and-treatments/" class="fm-panel-item" title="Procedures and treatments">
            <span class="fm-panel-link-inner">Procedures and treatments</span>
          </a>

        </li>
        <li class="fm-panel-item">
          <a href="/medical-conditions/kidney-stones/" class="fm-panel-item" title="Kidney stones">
            <span class="fm-panel-link-inner">Kidney stones</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/medical-conditions/share-your-story/" class="fm-panel-item" title="Share your story">

            <span class="fm-panel-link-inner">Share your story</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/medical-conditions/request-information/" class="fm-panel-item" title="Request information">
            <span class="fm-panel-link-inner">Request information</span>
          </a>
        </li>

        <li class="fm-panel-item">
          <a href="/medical-conditions/copyof-medical-conditions/" class="fm-panel-item" title="Copy of Medical Conditions">
            <span class="fm-panel-link-inner">Copy of Medical Conditions</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/medical-conditions/new-a-z-category-navigator-demo/" class="fm-panel-item" title="New A-Z category navigator demo">
            <span class="fm-panel-link-inner">New A-Z category navigator demo</span>

          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/medical-conditions/real-stories/" class="fm-panel-item" title="Real stories">
            <span class="fm-panel-link-inner">Real stories</span>
          </a>
        </li>
      </ul>

    </li>
  </ul>
</div><div class="footer-menu-panel fn-panel-beta">
  <ul>
    <li class="fm-panel-title">
      <a href="/parents-and-visitors/" class="fm-panel-title" title="Parents and visitors">
        <span class="fm-panel-title">Parents and visitors</span>
      </a>
      <ul class="fm-panel-list">

        <li class="fm-panel-item">
          <a href="/parents-and-visitors/coming-to-hospital/" class="fm-panel-item" title="Coming to hospital">
            <span class="fm-panel-link-inner">Coming to hospital</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/parents-and-visitors/advice-for-when-you-stay/" class="fm-panel-item" title="Advice for when you stay">
            <span class="fm-panel-link-inner">Advice for when you stay</span>

          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/parents-and-visitors/advice-for-when-you-leave/" class="fm-panel-item" title="Advice for when you leave">
            <span class="fm-panel-link-inner">Advice for when you leave</span>
          </a>
        </li>
        <li class="fm-panel-item">

          <a href="/parents-and-visitors/our-support-sevices/" class="fm-panel-item" title="Our support sevices">
            <span class="fm-panel-link-inner">Our support sevices</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/parents-and-visitors/general-health-advice/" class="fm-panel-item" title="General health advice">
            <span class="fm-panel-link-inner">General health advice</span>
          </a>

        </li>
        <li class="fm-panel-item">
          <a href="/parents-and-visitors/how-to-give-feedback/" class="fm-panel-item" title="How to give feedback">
            <span class="fm-panel-link-inner">How to give feedback</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/parents-and-visitors/getting-involved/" class="fm-panel-item" title="Getting involved">

            <span class="fm-panel-link-inner">Getting involved</span>
          </a>
        </li>
      </ul>
    </li>
  </ul>
</div><div class="footer-menu-panel fn-panel-gamma">
  <ul>
    <li class="fm-panel-title">

      <a href="/teenagers/" class="fm-panel-title" title="Teenagers">
        <span class="fm-panel-title">Teenagers</span>
      </a>
      <ul class="fm-panel-list">
        <li class="fm-panel-item">
          <a href="/teenagers/about-your-condition/" class="fm-panel-item" title="About your condition">
            <span class="fm-panel-link-inner">About your condition</span>
          </a>

        </li>
        <li class="fm-panel-item">
          <a href="/teenagers/real-stories/" class="fm-panel-item" title="Real stories">
            <span class="fm-panel-link-inner">Real stories</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/teenagers/coming-to-hospital/" class="fm-panel-item" title="Coming to hospital">

            <span class="fm-panel-link-inner">Coming to hospital</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/teenagers/staying-in-hospital/" class="fm-panel-item" title="Staying in hospital">
            <span class="fm-panel-link-inner">Staying in hospital</span>
          </a>
        </li>

        <li class="fm-panel-item">
          <a href="/teenagers/leaving-hospital/" class="fm-panel-item" title="Leaving hospital">
            <span class="fm-panel-link-inner">Leaving hospital</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/teenagers/general-health-advice/" class="fm-panel-item" title="General health advice">
            <span class="fm-panel-link-inner">General health advice</span>

          </a>
        </li>
      </ul>
    </li>
  </ul>
</div><div class="footer-menu-panel fn-panel-delta">
  <ul>
    <li class="fm-panel-title">
      <a href="/children/" class="fm-panel-title" title="Children">

        <span class="fm-panel-title">Children</span>
      </a>
      <ul class="fm-panel-list">
        <li class="fm-panel-item">
          <a href="/children/about-your-condition/" class="fm-panel-item" title="About your condition">
            <span class="fm-panel-link-inner">About your condition</span>
          </a>
        </li>

        <li class="fm-panel-item">
          <a href="/children/real-stories/" class="fm-panel-item" title="Real stories">
            <span class="fm-panel-link-inner">Real stories</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/children/coming-to-hospital/" class="fm-panel-item" title="Coming to hospital">
            <span class="fm-panel-link-inner">Coming to hospital</span>

          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/children/staying-in-hospital/" class="fm-panel-item" title="Staying in hospital">
            <span class="fm-panel-link-inner">Staying in hospital</span>
          </a>
        </li>
        <li class="fm-panel-item">

          <a href="/children/leaving-hospital/" class="fm-panel-item" title="Leaving hospital">
            <span class="fm-panel-link-inner">Leaving hospital</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/children/general-health-advice/" class="fm-panel-item" title="General health advice">
            <span class="fm-panel-link-inner">General health advice</span>
          </a>

        </li>
      </ul>
    </li>
  </ul>
</div><div class="footer-menu-panel fn-panel-epsilon">
  <ul>
    <li class="fm-panel-title">
      <a href="/health-professionals/" class="fm-panel-title" title="Health professionals">
        <span class="fm-panel-title">Health professionals</span>

      </a>
      <ul class="fm-panel-list">
        <li class="fm-panel-item">
          <a href="/health-professionals/clinical-specialties/" class="fm-panel-item" title="Clinical specialties">
            <span class="fm-panel-link-inner">Clinical specialties</span>
          </a>
        </li>
        <li class="fm-panel-item">

          <a href="/health-professionals/clinical-guidelines/" class="fm-panel-item" title="Clinical guidelines">
            <span class="fm-panel-link-inner">Clinical guidelines</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/health-professionals/clinical-outcomes/" class="fm-panel-item" title="Clinical outcomes">
            <span class="fm-panel-link-inner">Clinical outcomes</span>
          </a>

        </li>
      </ul>
    </li>
  </ul>
</div><div class="footer-menu-panel fn-panel-zeta">
  <ul>
    <li class="fm-panel-title">
      <a href="/about-us/" class="fm-panel-title" title="About Us">
        <span class="fm-panel-title">About Us</span>

      </a>
      <ul class="fm-panel-list">
        <li class="fm-panel-item">
          <a href="/about-us/tell-us-your-views/" class="fm-panel-item" title="Tell us your views">
            <span class="fm-panel-link-inner">Tell us your views</span>
          </a>
        </li>
        <li class="fm-panel-item">

          <a href="/about-us/who-we-are/" class="fm-panel-item" title="Who we are">
            <span class="fm-panel-link-inner">Who we are</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/about-us/our-priorities/" class="fm-panel-item" title="Our priorities">
            <span class="fm-panel-link-inner">Our priorities</span>
          </a>

        </li>
        <li class="fm-panel-item">
          <a href="/about-us/foundation-trust/" class="fm-panel-item" title="Foundation Trust - DO NOT REMOVE NOT TEST">
            <span class="fm-panel-link-inner">Foundation Trust - DO NOT REMOVE NOT TEST</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/about-us/our-corporate-information/" class="fm-panel-item" title="Our corporate information">

            <span class="fm-panel-link-inner">Our corporate information</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/about-us/our-history/" class="fm-panel-item" title="Our history">
            <span class="fm-panel-link-inner">Our history</span>
          </a>
        </li>

        <li class="fm-panel-item">
          <a href="/about-us/redevelopment/" class="fm-panel-item" title="Redevelopment">
            <span class="fm-panel-link-inner">Redevelopment</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/about-us/freedom-of-information-act/" class="fm-panel-item" title="Freedom of information act">
            <span class="fm-panel-link-inner">Freedom of information act</span>

          </a>
        </li>
      </ul>
    </li>
  </ul>
</div><div class="footer-menu-panel fn-panel-eta">
  <ul>
    <li class="fm-panel-title">
      <a href="/research-and-innovation/" class="fm-panel-title" title="Research and innovation">

        <span class="fm-panel-title">Research and innovation</span>
      </a>
      <ul class="fm-panel-list">
        <li class="fm-panel-item">
          <a href="/research-and-innovation/about-our-research-and-innovation/" class="fm-panel-item" title="About our research and innovation">
            <span class="fm-panel-link-inner">About our research and innovation</span>
          </a>
        </li>

        <li class="fm-panel-item">
          <a href="/research-and-innovation/our-research-infrastructure/" class="fm-panel-item" title="Our research infrastructure">
            <span class="fm-panel-link-inner">Our research infrastructure</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/research-and-innovation/chris-fixing-a-page/" class="fm-panel-item" title="Chris fixing a page ">
            <span class="fm-panel-link-inner">Chris fixing a page </span>

          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/research-and-innovation/our-partners/" class="fm-panel-item" title="Our partners">
            <span class="fm-panel-link-inner">Our partners</span>
          </a>
        </li>
        <li class="fm-panel-item">

          <a href="/research-and-innovation/our-research-themes/" class="fm-panel-item" title="Our research themes">
            <span class="fm-panel-link-inner">Our research themes</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/research-and-innovation/publications/" class="fm-panel-item" title="Publications">
            <span class="fm-panel-link-inner">Publications</span>
          </a>

        </li>
        <li class="fm-panel-item">
          <a href="/research-and-innovation/support-our-research/" class="fm-panel-item" title="Support our research">
            <span class="fm-panel-link-inner">Support our research</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/research-and-innovation/contact-us/" class="fm-panel-item" title="Contact us">

            <span class="fm-panel-link-inner">Contact us</span>
          </a>
        </li>
      </ul>
    </li>
  </ul>
</div><div class="footer-menu-panel fn-panel-theta">
  <ul>
    <li class="fm-panel-title">

      <a href="/working-here/" class="fm-panel-title" title="Working here">
        <span class="fm-panel-title">Working here</span>
      </a>
      <ul class="fm-panel-list">
        <li class="fm-panel-item">
          <a href="/working-here/current-jobs/" class="fm-panel-item" title="Current jobs">
            <span class="fm-panel-link-inner">Current jobs</span>
          </a>

        </li>
        <li class="fm-panel-item">
          <a href="/working-here/nursing/" class="fm-panel-item" title="Nursing ">
            <span class="fm-panel-link-inner">Nursing </span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/working-here/working-for-us/" class="fm-panel-item" title="Working for us">

            <span class="fm-panel-link-inner">Working for us</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/working-here/career-development/" class="fm-panel-item" title="Career development">
            <span class="fm-panel-link-inner">Career development</span>
          </a>
        </li>

        <li class="fm-panel-item">
          <a href="/working-here/educational-services/" class="fm-panel-item" title="Educational services">
            <span class="fm-panel-link-inner">Educational services</span>
          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/working-here/courses-and-conferences/" class="fm-panel-item" title="Courses and conferences">
            <span class="fm-panel-link-inner">Courses and conferences</span>

          </a>
        </li>
        <li class="fm-panel-item">
          <a href="/working-here/volunteering-for-us/" class="fm-panel-item" title="Volunteering for us">
            <span class="fm-panel-link-inner">Volunteering for us</span>
          </a>
        </li>
      </ul>

    </li>
  </ul>
</div><div class="footer-menu-panel fn-panel-iota">
  <ul>
    <li class="fm-panel-title">
      <a href="/news/" class="fm-panel-title" title="News">
        <span class="fm-panel-title">News</span>
      </a>
      <ul class="fm-panel-list">

        <li class="fm-panel-item">
          <a href="/news/press-releases/" class="fm-panel-item" title="Press releases">
            <span class="fm-panel-link-inner">Press releases</span>
          </a>
        </li>
      </ul>
    </li>
  </ul>

</div></div></div></div>
2

Hi,

It all depends what you mean by “active” and what you expect it to do. The :active state of a link is that moment that you click the link and for that brief second the link is active. Once you release the mouse or navigate away then the state is gone. It does not mean selected.

If you want the menu on the current page to be highlighted then you would need to add a class to that list item on each different page and then show the styles that you need. You would basically duplicate your hover rules for the current item.

e.g.


.fn-panel-iota a:hover, .fn-panel-iota a:active,
[B].current > a[/B]{exisitng hover rules etc.....}

I used the child selector so the above rule will fail in IE6 (If you support IE6 you would need to remove the child selector but then cancel out the styles on nested elements as they will cascade.)

On each page on the site you would need to add that new class at the relevant point so that each page gets its own highlight. ( Some cms systems like wordpress usually have an automatic current class that you can use (or some call it active which is badly confusing)).

You can automate the provess slightly by using classes on the body instead but that means that you also need classes on al list items as well.

I hope that was what you meant or am I talking at cross purposes :slight_smile:

3

Looking at you page again it looks like you already have an active class being added on each page so you could use this to style the top menu.



.selected-alpha li.fm-panel-title >  a {
    background: url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/navigation/nav_hover_bg.gif") repeat-x scroll 0 0 transparent;
color:#fff!important;
}

.selected-beta li.fm-panel-title >  a {
   background: url("/EasySiteWeb/EasySite/StyleData/one_site_hosp/Images/navigation/nav_hover_bg_p_and_v.gif") repeat-x scroll 0 0 transparent;
color:#fff!important;
}

You would need to add that for each menu (.selected-alpha, .selected-beta etc…) and apply the appropriate background image as required.

4

Mate you have really really helped, it 99% works, the home icon doesn’t but i will fix that.

Can i ask how did you work this out? i’ve done CSS for about 4 years and for the life of me i could work it out.

Did you use firebug, the answers are all there its just finding them.

Another confession why you this character > in the styling?

Thank you so much

J

PS: where are you based if you have paypal on your site i don’t mind contributing.

5

Huh, new forum bug: I coulda swore I saw that there were 44 replies, not 4 : )

Anyway…

Can i ask how did you work this out? i’ve done CSS for about 4 years and for the life of me i could work it out.

It’s actually a common thing (people want to highlight current selected thingie) and there are two popular solutions, differing depending on whether you do an include for the same menu on every page, or if each page has a slightly different menu (this is your case, each page has an “active alpha/beta” class on the appropriate list item). Since Paul saw that your page already has the correct class on the correct spot, he only needed to apply highlighting styles to those classes. (It’s more CSS if you have a system that gives exactly the same menu on every page)

Another confession why you this character > in the styling?

M0aR about the (direct) child selector. As Paul mentioned, IE6 does not know what it means and ignores the whole ruleset.
Using it means your other descendant anchors won’t also get highlighted.