Collapsové menu - js, css

function initMenus() {
$('ul.menu ul').hide();
$.each($('ul.menu'), function(){
$('#' + this.id + '.expandfirst ul:first').show();
});
$('ul.menu li a').click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;
if($('#' + parent).hasClass('noaccordion')) {
$(this).next().slideToggle('normal');
return false;
}
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
if($('#' + parent).hasClass('collapsible')) {
$('#' + parent + ' ul:visible').slideUp('normal');
}
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#' + parent + ' ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenus();});

<ul id="menu"> 
        <li><a href="index.html">Hlavná stránka</a></li>   
        <li><a href="index.html">Charakteristika organizácie</a></li>
        <li><a href="#">Organizačné zložky</a>
            <ul>
                <li><a href="ms.html">Materské školy</a></li>
                <li><a href="sj_ms.html">Školské jedálne pri MŠ</a></li>
            </ul>
            </li>
        <li><a href="#">Kontakty</a>
            <ul>
                <li><a href="kontakty_riad.html">Riaditeľ</a></li>
                <li><a href="kontakty_personal.html">Personálny a mzdový úsek</a></li>
                <li><a href="kontakty_ekonomika.html">Ekonomický úsek</a></li>
                <li><a href="kontakty_technicky.html">Technický úsek</a></li>
                <li><a href="kontakty_archiv.html">Archív</a></li>
                <li><a href="kontakty_udrzba.html">Úsek údržby</a></li>
            </ul>
        </li>
        <li><a href="#">Zverejňovanie zmlúv, objednávok, faktúr</a>
            <ul>
                <li><a href="zmluvy.html">Zmluvy</a></li>
                <li><a href="objednavky.html">Objednávky nad 1000 €</a></li>
                <li><a href="faktury.html">Faktúry nad 1000 €</a></li>
            </ul>
        </li>
        <li><a href="#">Verejné obstarávanie</a>
            <ul>
                <li><a href="obstaravanie.html">Štvrťročné správy o zákazkach s nízkou hodnotou nad 1000 €</a></li>
                <li><a href="obstaravanie_aktual.html">Prebiehajúce verejné obstarávania</a></li>
            </ul>
        </li>
        <li><a href="info.html">Informácie</a></li>
        <li><a href="praca.html">Ponuka práce</a></li>
      </ul>

#menu {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 0.9em;
}
ul#menu, ul#menu ul {
  list-style-type:none;
  border-left: 3px #000 solid;
  padding-left: 15px;
  margin: 0;
  padding: 0;
  width: 20em;
}

ul#menu a {
  display: block;
  text-decoration: none;    
}

ul#menu li {
  margin-top: 1px;
}

ul#menu li a {
  background: #59670A;
  color: #fff;    
  padding: 0.5em;
}

ul#menu li a:hover {
  background: #000;
}

ul#menu li ul li a {
  background: #ccc;
  color: #000;
  padding-left: 20px;
}

ul#menu li ul li a:hover {
  background: #aaa;
  border-left: 5px #fff solid;
  padding-left: 15px;
}

.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }
.hidden {display:none;}