¿Cómo agregar subpestañas ocultas en un menú con HTML y CSS?

chuster Seguir

Alfa
Verificación en dos pasos desactivada
Desde
13 Ene 2018
Mensajes
17
Buenas, no dispongo de conocimientos html y css cómo para modificar el código, mi duda es si éste mismo menú se podría agregar subpestañas ocultas que al pulsar aparezcan, al igual con las mismas características que tiene la actual. Gracias por adelantado.

<style type="text/css">
#menu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
font-family: Arial, sans-serif;
font-size: 11pt;
}
#menu ul li {
background-color: #666;
}
#menu ul li a {
color: #ccc;
text-decoration: none;
text-transform: uppercase;
display: block;
padding: 10px 10px 10px 20px;
}
#menu ul li a:hover {
background: #000;
border-left: 10px solid #333;
color: #fff;
}
border-left: 10px solid #666;

</style>


<div id="menu">
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a>
<li><a href="..." title="...">Archivos</a></li>
<li><a href="..." title="...">Enlaces</a></li>
<li><a href="..." title="...">Acerca de</a></li>
</li></ul>
</div>
 

Carambel

Ómicron
Social Media
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
25 Ago 2013
Mensajes
4.926
Aca se muestran subcategorías, lo demás es con css (Te recomiendo usar Bootstrap)

<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

</body>
</html>
 

attack

Gamma
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
25 Ene 2015
Mensajes
226
Hola saludos probar con este

aca el html:
HTML:
<div id="menu" class="menu">
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a>
<li><a href="..." title="...">Archivos</a></li>
<li id="submenu"><a href="..." title="...">Enlaces</a>
<ul>
<li><a href="..." title="...">Enlaces 2</a></li><li><a href="..." title="...">Enlaces 1</a></li>
</ul>
</li>
<li><a href="..." title="...">Acerca de</a></li>
</li></ul>
</div>

</html>


aca el css
PHP:
<style type="text/css">
#menu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
font-family: Arial, sans-serif;
font-size: 11pt;
}
#menu ul li {
background-color: #666;
}
#menu ul li a {
color: #ccc;
text-decoration: none;
text-transform: uppercase;
display: block;
padding: 10px 10px 10px 20px;
}
#menu ul li a:hover {
background: #000;
border-left: 10px solid #333;
color: #fff;
}
#submenu ul{
	display:none;
}
#submenu:hover > ul{
	display:block;
}
</style>
 

chuster

Alfa
Verificación en dos pasos desactivada
Desde
13 Ene 2018
Mensajes
17
Gracias por la aportación pero aún no sé demasiado sobre html y css como para empezar con bootstrap...jajaj de todas formas había oído hablar de éste lenguaje y se ve que es muy utilizado, cuando tenga tiempo prometo echarle un ojo. Graciass

- - - Actualizado - - -

Mil gracias [MENTION=127724]attack[/MENTION], ha bastado con copiarlo y pegarlo con el mismo formato y pumm justo lo que buscaba. No sabía que había tanto crack por aquí, me habían hablado bien de éste foro, pero ahora lo puedo corroborar. Gracias de nuevo crack. Un saludo
 

emaria01

Épsilon
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
26 Dic 2014
Mensajes
763
uff muy buen aporte.. resolvi un problemita con esto.. gracias [MENTION=127724]attack[/MENTION]
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba