Como adicionar subabas ocultas em um menu com HTML e CSS?

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>

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>

Hola saludos probar con este

aca el html:


aca el css

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

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