bueno.. dandome a la tarea de pensar un tanto queda algo asi..
Código HTML:
<html>
<head>
<style type="text/css">
<!--
ul {display:inline; margin:0}
li {list-style: none;}
ul.sub li {margin-left: 15px;}
#1,#2 {display: none;}
-->
</style>
<script language="JavaScript">
<!--
function cambiaEstado(iden,el){
var elhtml = document.getElementById(iden);
var elhtml2 = document.getElementById(el);
if (elhtml.style.display == 'block'){
elhtml.style.display = 'none';
elhtml2.src = 'book.gif';
}
else{
elhtml.style.display = 'block';
elhtml2.src = 'bookopen.gif';
}
}
-->
</script>
</head>
<body>
<ul>
<li><a href="#" onClick="javascript:cambiaEstado('1','1')"><img id="c1" src="book.gif" width="16" height="15">Bienvenido</a></li>
<li id="1">
<ul class="sub">
<li>jkhkl</li>
<li>jkjkljkl</li>
<li>kljhklhkl</li>
</ul>
<li>
<ul>
<li><a href="#" onClick="javascript:cambiaEstado('2','2')"><img id="c2" src="book.gif" width="16" height="15">Visual Basic 6.0</a></li>
<li id="2">
<ul class="sub">
<li>jkhkl</li>
<li>jkjkljkl</li>
<li>kljhklhkl</li>
</ul>
<li>
</body>
</html> nos vemos..