spry barra menu pagina activa

[patricia198]

Hola, estoy utilizando la barra de menu spry en dreamweaver, no encuentro la forma de que cuando estás en la página activa, la pestaña correspondiente esté activa de un color distinto. He probado cambiando propiedades css pero sólo funciona en Chrome y cuando clicas de nuevo en la pág desaparece el color de la pestaña!!
Gracias

[emilio_viguri]

Disculpa ando en lo mismo pero pues como que les falta ver el código, para que sepan de lo que hablamos este es el menu básico.

Yo cree una nueva clase que pues la mando a llamar para ponerla en mi código cuando esta activo, pero pues no logro saber que esta mal mi clase es esta, también menciono que mi entendimiento de CSS es limitado no se donde se tiene que poner algo en las ramificaciones esta mal pero no se que sea.

Código CSS:

/* ACTIVAR MENU CON UNA CLASE PARA PONER CUANDO LE DES CLIC */
ul.MenBarHorizontal.ActivaMenu{
    background-color: #33C;
    color: #FFF;
}
 

Codigo CSS que te da herramientas spry dreamweaver

Código CSS:

Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
    border: 1px solid #CCC;
}
/* ACTIVAR MENU CON UNA CLASE PARA PONER CUANDO LE DES CLIC */
ul.MenBarHorizontal.ActivaMenu{
    background-color: #33C;
    color: #FFF;
}
 
 
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
    display: block;
    cursor: pointer;
    background-color: #EEE;
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
    background-color: #33C;
    color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
    background-color: #33C;
    color: #FFF;
}
 
/*******************************************************************************
 
 SUBMENU INDICATION: styles if there is a submenu under a given menu item
 
 *******************************************************************************/
 
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}
 
/*******************************************************************************
 
 BROWSER HACKS: the hacks below should not be changed unless you are an expert
 
 *******************************************************************************/
 
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
    ul.MenuBarHorizontal li.MenuBarItemIE
    {
        display: inline;
        f\loat: left;
        background: #FFF;
    }
}
 

Este seria mi menu que pues le puse varias opciones a ver donde lo logro activar

Código HTML:

<ul id="MenuBar1" class="MenuBarHorizontal">
      <li class="ActivaMenu"><a href="antecedentes.php >Antecedente</a></li>
      <li><a href="antecedentes.php" class="ActivaMenu" >Antecedente</a></li>
      <li><a href="antecedentes.php">Antecedente</a></li>
</ul>
 

1. lo pongo en el li
2. lo pongo en el a href
3. no pongo nada para ver la diferencia

Como ven ?

[Rafael]

Hay un selector especial donde el contenido debe de ser exacto:

a[href="linkespecifico.html"] {color: #red;}

Este hace que cuando la página donde está esto, se llama linkespecifico.html entonces y solo entonces aplica el estilo. Nota los corchetes y href=.