No cambia la fuente a submenú

[ceaped]

Buenos días
Tengo un menú en el cual se despliega un submenú así:

Código CSS:

nav {
    width: 960px;
    margin: 0 auto;
    background-color: transparent;
}
    
ul.topnav {
    list-style-type: none;
    width: 800px;
    height: 50px;
    margin: 10px 0 20px 0;  
    padding: 0;
    background-color: #003600;
}
 
ul.topnav li {
    float: left;
    background-color: #FFFFFF;
}
 
ul.topnav li a {
    font-family: 'PT Sans', sans-serif;
    font-size: 17px;
    display: inline-block;
    color: #EFEDED;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
}
 
ul.topnav li a:hover {
    background-color: #006400;
}
 
ul.topnav li.icon {
    display: none;
}
 
.active {
    text-indent:-666em;
    margin: 0px 0px 0px -32px;
}
 
ul.active > li > a:active:before {
    background-color: blue;
}
 
.topnav li ul {
    font-size: 10px !important;
    display: none;
    position: absolute;
    float: left;
    list-style-type: none;
    background-color: #003600;
}
 
.topnav li:hover > ul {
    font-size: 10px !important;
    display: block;
}
 

Pero en ".topnav li ul" no me cambia el tamaño de la fuente ni logro que se despliegue el submenú de manera horizontal.

¿Cómo hago para que me cambie el tamaño de la fuente y las opciones se desplieguen de manera vertical?

Gracias por su ayuda

[ArturoGallegos]

Siempre recuerda el nivel de especifidad

esto es mas especifico ->ul.topnav li a

[ceaped]

Hola ArturoGallegos
Yo deseo cambiar el tamaño de la fuente "font-size: 12px;" en el submenú pero no me cambia el tamaño:

Código CSS:

.topnav li ul {
    font-family: 'PT Sans', sans-serif;
    font-size: 12px;
    display: none;
    position: absolute;
    margin: 0 auto;
    float: left;
    list-style-type: none;
    background-color: #003600;
}
 

¿Cómo hago para cambiar el tamaño de la fuente?

Gracias por tu ayuda

[ArturoGallegos]

Siempre revisa la jerarquía y nivel de especifidad de tus estilos, si revisas mi comentario previo ya te respondí a tu problema, si no lo entendiste, indícalo y te puedo remitir a un par de links de documentación.... recuerda que si nos los aplica hay de 3 sopas.

- estas aplicándolo a otro lado (no es tu caso)
- la jerarquía y/o especifidad no es la correcta (es tu caso)
- hay otras hojas de estilo con código que interfiere (no es tu caso o no parece serlo).

[ceaped]

Hola ArturoGallegos
Si no entiendo, mira que puse el .css del submenú ahí tengo tipo de letra tamaño entre otros lo cual no me hace nada.

Gracias por tu ayuda

[ArturoGallegos]

Fijate bien en lo que te dije.... "Espeficidad y jerarquia"

Tu tienes

Código CSS:

ul.topnav li a {
    font-family: 'PT Sans', sans-serif;
    font-size: 17px;
    display: inline-block;
    color: #EFEDED;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
}
    .topnav li ul {
        font-family: 'PT Sans', sans-serif;
        font-size: 12px;
        display: none;
        position: absolute;
        margin: 0 auto;
        float: left;
        list-style-type: none;
        background-color: #003600;
    }
 

Cual crees tu que es mas especifico?

Si revisas el depurador de tu navegador (presionando F12) seguramente veras que estilos son los que se están aplicando y en que orden.

[ceaped]

Hola ArturoGallegos
Este .css es del menú principal:

Código CSS:

ul.topnav li a {
    font-family: 'PT Sans', sans-serif;
    font-size: 17px;
    display: inline-block;
    color: #EFEDED;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
}
 

Cuando me paro sobre el me carga el submenú:

Código CSS:

.topnav li ul {
    font-family: 'PT Sans', sans-serif;
    font-size: 12px;
    display: none;
    position: absolute;
    margin: 0 auto;
    /*min-width: 960px;*/
    float: left;
    list-style-type: none;
    background-color: #003600;
}
 

En este último .css es que no me cambia el tamaño de la letra.

Gracias por tu ayuda

[ArturoGallegos]

Te encargo de tarea leer sobre jerarquías y especifidad en los selectores CSS

de momento para resolver tu problema en lugar de aplicar el tamaño de letra a

Código CSS:

/*lo que tienes*/
.topnav li ul{
font-size:12px;
}
/* lo que debes poner - selector con mas peso por especifidad / mas especifico */
ul.topnav li ul a{
font-size:12px;
}
 

[ceaped]

Hola ArturoGallegos
funcionó...:)

Gracias por tu ayuda

Nota: algún documento que me puedas referenciar?

[ArturoGallegos]

Sobre especifidad que era tu caso
http://www.jasoft.org/Blog/post/Tu-e...eglas-CSS.aspx

buscando en google puedes encontrar mas, información si esta no te queda clara.