Загрузка данных

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Горизонтальное меню</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<nav class="horizontal">
    <ul>
        <li>
            <a href="#">Легковые</a>
            <ul class="submenu">
                <li><a href="#">Седан</a></li>
                <li><a href="#">Хэтчбек</a></li>
                <li><a href="#">Универсал</a></li>
            </ul>
        </li>

        <li>
            <a href="#">Внедорожники</a>
            <ul class="submenu">
                <li><a href="#">Кроссоверы</a></li>
                <li><a href="#">Полный привод</a></li>
            </ul>
        </li>

        <li><a href="#">Автотовары</a></li>
    </ul>
</nav>

</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Вертикальное меню</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<nav class="vertical">
    <ul>
        <li>
            <a href="#">Легковые</a>
            <ul class="submenu">
                <li><a href="#">Седан</a></li>
                <li><a href="#">Хэтчбек</a></li>
            </ul>
        </li>

        <li>
            <a href="#">Внедорожники</a>
            <ul class="submenu">
                <li><a href="#">Кроссоверы</a></li>
                <li><a href="#">Полный привод</a></li>
            </ul>
        </li>

        <li><a href="#">Автотовары</a></li>
    </ul>
</nav>

</body>
</html>





* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

ul {
    list-style: none;
}

a {
    display: block;
    padding: 10px 20px;
    background: steelblue;
    color: white;
    text-decoration: none;
}

a:hover {
    background: orange;
}

/* Горизонтальное меню */
.horizontal > ul {
    display: flex;
}

.horizontal li {
    position: relative;
}

.horizontal .submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 180px;
}

.horizontal li:hover .submenu {
    display: block;
}

/* Вертикальное меню */
.vertical {
    width: 200px;
    margin-top: 30px;
}

.vertical li {
    position: relative;
}

.vertical .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 180px;
}

.vertical li:hover .submenu {
    display: block;
}