¿Cómo aplico CSS a los elementos del menú de segundo nivel?

StackOverflow https://stackoverflow.com/questions/125612

  •  02-07-2019
  •  | 
  •  

Pregunta

Tengo un menú que se ejecuta en un mapa del sitio y uno de los SiteMapNode se ve así: 

<siteMapNode title="Gear" description="" url="">
  <siteMapNode title="Armor" description="" url="~/Armor.aspx" />
  <siteMapNode title="Weapons" description="" url="~/Weapons.aspx" />
</siteMapNode>

También tengo un Skin aplicado al menú asp: que usa la siguiente definición CSS:

.nav-bar {
  z-index: 2;
  margin-top: -5%;
  position: absolute;
  top: 281px;
  font-family: Jokewood;
  font-style: italic;
}

Cuando ejecuto el sitio web y paso el mouse sobre el enlace Gear, la fuente Jokewood no se aplica a esos elementos, ¿cómo puedo aplicar el CSS a los títulos de Armadura y Armas?

Actualizar
Debería haber mencionado que la fuente se muestra correctamente en todos los siteMapNodes no anidados.

¿Fue útil?

Solución

Debe vincular estilos como este (para elementos de menú tanto estáticos como dinámicos):

<asp:Menu ID="Menu1" runat="server" >
    <StaticMenuStyle CssClass="nav-bar" />
    <DynamicMenuStyle CssClass="nav-bar" />
</asp:Menu>

Otros consejos

puedes anidar comandos CSS enumerándolos en secuencia

siteMapNode siteMapNode { ....código css...} se aplicaría al nodo interno.

por ejemplo,

#menú ul ul {...}

se aplicaría a
<ul> <-- no aquí
<li>
</li>
</ul>
<div id="menú">
<ul> <-- no aquí
<ul> <---- aquí

Firefox Desarrollador web (https://addons.mozilla.org/en-US/firefox/addon/60) el complemento es una buena alternativa/compañero de firebug.Es más fácil de usar para la depuración de CSS (OMI)

La piel se aplica a través de una plantilla .skin.

<asp:Menu runat="server" CssClass="nav-bar" />
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top