rozwijane menu w css lub js

[sebcio80]

Mam sobie na stronie menu w takiej postaci:

<ul>
 <li>
<ul>
   <li>		 
	 <ul>
	   <li></li>
	   <li></li>
	 </ul>
  </li>
  <li></li>
  <li></li>
</ul>
 </li>
 <li></li>
 <li></li>
</ul>

czyli menu dwupoziomowe

mozna je zobaczyc na mojej stronie https://www.sebafoto.com - w tej chwili jest zwiniete i kategorie rozwijaja sie po kliknieciu ale nie ma problemu abym w kazdej chwili rozwinal cale menu

chodzi mi to aby zrobic ladne rozwijane menu cos na wzor: https://saimon.org/galerie/ - tylko oczywiscie w pionie a nie poziomie

bardziej podoba mi sie menu takie jakie jest na stronie https://www.wroclaw.pl - jest to jednak javascript i chyba nie bedziedzie tego polecac - jednak jezeli ktos moze mi pomoc jak to zrobic to chetnie poczytam

moja znajomosc css jest dosc uboga i mimo paru poradnikow i przykladow nie moge sobie poradzic, moze ktos mi pomoze?

[abc]

Popatrz tutaj:

https://tutorials.alsacreations.com/deroulant/cssmenu4.htm

[yavaho]

Albo tu w dziale mygosuMenu

https://code.gosu.pl/

[sebcio80]

troche pokombinowalem w css i z dwoch przykladow, ktore u mnie nie dzialaly zlozylem jeden, ktory dziala tylko na IE7 i tylko lokalnie (w krasnalu) na Mozilli nie dziala, wogole menu sie nie rozwija, siedzialem pol nocy i nie wiem dlaczego, ktos ma jakis pomysl?

#menu ul
{
text-align:left;
list-style-type: square;
padding-left:15px;
margin: 5px;
border-bottom:1px solid #008000;
}



#menu ul li
{
position: relative;
z-index: 5;
}



#menu li ul
{
position: absolute;
z-index: 5;
top: 0;
display: none;
padding:0;
margin:0;
}

#menu li ul ul
{
position: absolute;
z-index: 5;
top: 0;
display: none;
}	


#menu ul li a
{
border-left:1px solid #008000; border-right:1px solid #008000; border-top:1px solid #008000; display: block;
text-decoration: none;
background: #006600;
border-bottom: 0px none;
}


#menu a
{   
padding: 1px 0px 1px 5px;
display: block;
width: 12em;
} 

#menu li ul a
{	
width: 15em;
} 

#menu li ul ul a
{	
width: 35em;
} 

#menu a:hover
{
background:#008000;
}

#menu li:hover ul, #menu li.sfhover ul
{ 
display: block;
}

#menu li:hover ul ul, #menu li.sfhover ul ul
{
display:none;
} 

#menu li li:hover ul, #menu li li.sfhover ul
{	 
display:block;
}