Hola! Ya intente hacerlo pero solo me respeta un solo color y el primer menu lo desaparece y la otra opción si me deja los dos renglones mas no me respeta el color
Muchas Gracias
entre Desarrolladores
Recibe ayuda de expertos
Registrate y pregunta
Es gratis y fácil
Recibe respuestas
Respuestas, votos y comentarios
Vota y selecciona respuestas
Recibe puntos, vota y da la solución
Pregunta
Como hacer un menú fijo horizontal pero con dos renglones de diferente color solo usando HTML y CSS
- preguntó
- Web
- 1390 Vistas
- 3 Respuestas
- solucionada
3 Respuestas
Hola @Luluica,
para hacer menúes como se ven en la imagen, lo más cómodo y simple es generar 2 estructuras UL, y decorar cdada una de la forma deseada.
Si necesitás que el menú esté fijo, es decir, que al scrollar siga visible, bastará con que pongas a ambos en DIV que esté fijo y que los UL estén dentro de él.
Hacer todo en el mismo UL implica hacer algo que la propia definición del HTML no soporta: decidir en qué LI se corta el UL y los demás bajan a la siguiente posición... tal vez se podría conseguir ese efecto con un solo UL con un CSS complejo, pero en ese caso dudo que se pueda hacer también responsivo.
La solución más simple es tener dos ULs...
Saludos cordiales!
Por favor, accede o regístrate para añadir un comentario.
En menos de 5 min. encontré un ejemplo, Con todo respeto y espero no te molestes pero ¿Es tan difícil buscar ejemplos en Internet?
HTML
<body class="empresa">
<header>
<div class="nav">
<ul>
<li class="home"><a href="#">Inicio</a></li>
<li class="acerca"><a href="#">Acerca</a></li>
</ul>
</div>
</header>
</body>
CSS
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.home {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
background: #F4511E;
height: 40px;
border-bottom: 1px solid #888;
}
.acerca {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
background: #66BB6A;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
@media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Mostrar en línea */
.nav li {
display: inline-block;
margin-right: -4px;
}
}
Por favor, accede o regístrate para añadir un comentario.
quitale el responsive que tiene el codigo que te dio x4mp73r
```
<body class="empresa">
<header>
<div class="nav">
<ul>
<li class="home"><a href="#">Inicio</a></li>
<li class="acerca"><a href="#">Acerca</a></li>
</ul>
</div>
</header>
</body>
body {
margin: 0;
padding: 0;
background: #ccc;
}
header{
position:fixed;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.home {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
background: #F4511E;
height: 40px;
border-bottom: 1px solid #888;
}
.acerca {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
background: #66BB6A;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
Por favor, accede o regístrate para añadir un comentario.
Por favor, accede o regístrate para responder a esta pregunta.
En el blog
-
- 407156
- 1
- Jul 5, 2015
Sin Respuesta
-
- 172
- 0
- Mar 19
-
- 88
- 2
- Feb 26
-
- 1150
- 0
- Nov 7, 2023
-
- 304
- 0
- Sep 19, 2023
-
- 306
- 0
- Ago 21, 2023
-
- 390
- 0
- May 14, 2023
-
- 359
- 0
- Abr 21, 2023
-
- 447
- 0
- Mar 31, 2023
- ver todas
Actividad Reciente
ArtEze respondió hace 2 días
Alguien sabe, no me ignorenArtEze seleccionó una respuesta hace 2 días
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió hace 2 días
Bajar extensión de Chrome sin actualizar el navega…ArtEze preguntó hace 2 días
Bajar extensión de Chrome sin actualizar el navega…ArtEze respondió hace 2 días
No me deja instalar OracleArtEze respondió hace 2 días
Formulario que guarde los datos de un jsonArtEze comentó hace 2 días
Script /boot/ scrapingSantiago2610 comentó Mar 23
Acualizar ChoiceField en djangoSantiago2610 preguntó Mar 19
Acualizar ChoiceField en djangogonzalss preguntó Feb 26
Script /boot/ scraping
Ultimas Preguntas
Usuarios Top
- Leonardo-Tadei
- 227320 Puntos
- Peter
- 150470 Puntos
- white
- 75880 Puntos
- carlossevi
- 63580 Puntos
- magarzon
- 30650 Puntos
- pregunton
- 20400 Puntos