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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Горизонтальное меню</title>
    <style>
        .menu {
            list-style-type: none;
            margin: 0;
            padding: 0;
            border-bottom: 2px solid #6c5ce7; /* Фиолетовая линия снизу */
        }

        .menu li {
            display: inline;      /* Делаем список горизонтальным */
            margin-right: -5px;   /* Убираем промежутки между элементами */
        }

        .menu a {
            display: inline-block;
            text-decoration: none;
            color: #555;
            background-color: #dfe6e9; /* Светло-серый фон */
            padding: 10px 15px;
            border-right: 1px solid #b2bec3; /* Разделители между пунктами */
            font-family: sans-serif;
            font-size: 14px;
        }

        /* Оформление для первого и последнего элемента (опционально) */
        .menu li:first-child a { border-left: 1px solid #b2bec3; }
        .menu a:hover { background-color: #b2bec3; } /* Эффект при наведении */
    </style>
</head>
<body>

    <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contacts</a></li>
    </ul>

</body>
</html>