1. Качаем с официального сайта и подключаем к своей странице библиотеки jquery и jquery-ui
2. Внутри <head> вставляем скрипт
<script> $(function() { $( "#menu" ).menu(); }); </script>Теперь ul id="menu" превратится в выпадающее меню. Соответственно можно вписать любой другой селектор под конкретный случай.
Это готовый пример с официального сайта, как всё выглядит — можно посмотреть здесь http://jqueryui.com/menu/
<!doctype html><html lang="en"><head> <meta charset="utf-8" /> <title>jQuery UI Menu - Default functionality</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css" /> <script> $(function() { $( "#menu" ).menu(); }); </script> <style> .ui-menu { width: 150px; } </style></head><body><ul id="menu"> <li class="ui-state-disabled"><a href="#">Aberdeen</a></li> <li><a href="#">Ada</a></li> <li><a href="#">Adamsville</a></li> <li><a href="#">Addyston</a></li> <li> <a href="#">Delphi</a> <ul> <li class="ui-state-disabled"><a href="#">Ada</a></li> <li><a href="#">Saarland</a></li> <li><a href="#">Salzburg</a></li> </ul> </li> <li><a href="#">Saarland</a></li> <li> <a href="#">Salzburg</a> <ul> <li> <a href="#">Delphi</a> <ul> <li><a href="#">Ada</a></li> <li><a href="#">Saarland</a></li> <li><a href="#">Salzburg</a></li> </ul> </li> <li> <a href="#">Delphi</a> <ul> <li><a href="#">Ada</a></li> <li><a href="#">Saarland</a></li> <li><a href="#">Salzburg</a></li> </ul> </li> <li><a href="#">Perch</a></li> </ul> </li> <li class="ui-state-disabled"><a href="#">Amesville</a></li></ul></body></html>