1 .menu {2 border:dashed gray 1px;3 width:160px;4 }5 6 .menu UL {7 /* Estas 3 lineas quitan el estilo de lista */8 list-style-type:none;9 padding:0;10 margin:0;11 }12 13 .menu LI {14 /* Estas 3 líneas son para homogeneizar el comportamiento entre navegadores */15 display:block;16 margin:0;17 padding:0;18 }19 20 .menu A {21 /* Estas líneas dan estilo a los botones de enlace */22 color:white;23 background:orange;24 display:block;25 padding:4px;26 text-decoration:none;27 text-align:center;28 margin:2px;29 border-radius:3px;30 } 31 32 .menu A:hover {33 background-color:silver;34 }35 36 .menu A.selected {37 background-color:darkred;38 }39 40 41 /* Ahora aplico estilos específicos al menú 1 para que sea horizontal */42 #menu1 {43 width:auto;44 text-align:center;45 }46 47 #menu1 LI {48 display:inline;49 }50 51 #menu1 A {52 display:inline-block;53 }54 55 /* Ahora aplico estilos específicos al menú 2 para cambiar sus colores: */56 57 #menu2 A {58 background-color:gray;59 }60 61 #menu2 A:hover {62 background-color:lightblue;63 }64 65 #menu2 A.selected {66 background-color:navy;67 }68 Enlace
El enlace para compartir es: