#menu > li > ul { display: none; } #menu > li:first-child > ul { display: block; }
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> function initMenu() { $('#menu ul').hide(); $('#menu ul:first').show(); $('#menu ul:first ul').show(); $('#menu li a').click( function() { var checkElement = $(this).next(); if((checkElement.is('ul')) && (checkElement.is(':visible'))) { return false; } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#menu ul:visible').slideUp('normal'); $('#menu ul:visible ul').slideUp('normal'); checkElement.slideDown('normal'); checkElement.find('ul').slideDown('normal'); return false; } } ); } $(document).ready(function() {initMenu();}); </script> </head> <body> <ul id="menu"> <li> <a href="#">Главная</a> <ul> <li><a href="#">Каталог 1</a></li> <li><a href="#">Каталог 2</a> <ul> <li><a href="#">Подкаталог 1</a></li> <li><a href="#">Подкаталог 2</a></li> <li><a href="#">Подкаталог 3</a></li> </ul> </li> <li><a href="#">Каталог 3</a></li> </ul> </li> <li> <a href="#">Еще какая то</a> <ul> <li><a href="#">Каталог 1</a></li> <li><a href="#">Каталог 2</a> <ul> <li><a href="#">Подкаталог 1</a></li> <li><a href="#">Подкаталог 2</a></li> <li><a href="#">Подкаталог 3</a></li> </ul> </li> <li><a href="#">Каталог 3</a></li> </ul> </li> <li> <a href="#">Programming Languages</a> <ul> <li><a href="#">PHP</a></li> <li><a href="#">Ruby</a></li> </ul> </li> </ul> </body> </html>
?
