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>
<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>