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

chuster · 7 Feb 2018

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 · 7 Feb 2018

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 · 7 Feb 2018

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 · 8 Feb 2018

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 · 12 Feb 2018

uff muy buen aporte.. resolvi un problemita con esto.. gracias [MENTION=127724]attack[/MENTION]

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

chuster

Carambel

attack

chuster

emaria01

Temas similares