Как создать многоуровневое меню, горизонтальное с выпадающими пунктами?

Для создания многоуровневого горизонтального меню с выпадающими пунктами веб-разработчики часто используют HTML, CSS и JavaScript. Рассмотрим пример пошагово:

1. HTML:

<nav id="main-menu">
    <ul>
        <li><a href="#">Главная</a></li>
        <li>
            <a href="#">Категория</a>
            <ul>
                <li><a href="#">Подкатегория 1</a></li>
                <li><a href="#">Подкатегория 2</a></li>
            </ul>
        </li>
        <li><a href="#">О нас</a></li>
    </ul>
</nav>

2. CSS:

#main-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#main-menu ul li {
    display: inline-block;
    position: relative;
}

#main-menu ul ul {
    display: none;
    position: absolute;
}

#main-menu ul li:hover > ul {
    display: block;
}

3. JavaScript (используя jQuery для упрощения):

$(document).ready(function() {
    $('#main-menu li').hover(function() {
        $(this).children('ul').stop().slideDown(200);
    }, function() {
        $(this).children('ul').stop().slideUp(200);
    });
});

В данном примере при наведении курсора на пункт меню с подменю, оно будет отображаться, а при убирании курсора — скрываться. Вы можете доработать стили и добавить анимации по своему усмотрению.

Это лишь один из способов создания многоуровневого горизонтального меню с помощью HTML, CSS и JavaScript. На самом деле существует множество различных подходов и технологий для реализации подобных меню, включая CSS-фреймворки, чистый CSS, JavaScript библиотеки и фреймворки.