<div class="menu">
    <a class="menu1" id="main" href="http://127.0.0.1:8000/">Меню1</a>
    <a class="menu1" id="about" href="http://127.0.0.1:8000/about">Меню2</a>
    <a class="menu1" id="rules" href="http://127.0.0.1:8000/rules">Меню3</a>
</div>
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans&family=Caveat&display=swap');

div a {
    display: inline-block;
    text-align: center;
}

div {
    display: block; /* Объявляем, что блок с меню - это именно блок */
    text-align: center;
    background-color: red;
}

div a {
    border: 1px solid #000; /* Рамка вокруг текста */
    padding: 3px; /* Поля вокруг текста */
    border-radius: 10px; /* Скругление углов блока */
    background-color: #9DC9EB; /* Цвет фона */
    text-decoration: none; /* Отменяем подчеркивание у ссылки */
    font-family: 'Balsamiq Sans', cursive;
}

a:hover {
    color: #FFFFFF; /* Изменение цвета текста на белый при наведении на него курсора */
    transform: scale(2.1);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.