CSS выпадающее меню на div

Последнее обновление на 16.12.2022

CSS выпадающее меню на div

 
.menu-down-my{
    position: relative;
    display:inline-block;
}
.button-menu-down-my{
    color:white;
    background-color:gray;
    /*border-radius:10px;*/
    border:none;
    padding: 10px;
    font-size: 18px;
}
.link-menu-down-my{
    display: none;
    position: absolute;
    min-width: 180px;
    /*color:white;*/
    background-color:grey;
    z-index: 1;
}
.link-menu-down-my a{

    display: block;
    padding: 10px 10px;
    text-decoration: none;
    font-size: 18px;
    color:white;
    
}
.link-menu-down-my a:hover{
    background-color:rgb(67, 54, 110);
}
.menu-down-my:hover .link-menu-down-my{
    display: block;
}
.menu-down-my:hover .button-menu-down-my{
    background-color:rgb(67, 54, 110);
}

<div class="menu-down-my">
    <button class="button-menu-down-my">Выпадающее меню</button>
    <div class="link-menu-down-my">
    <a href="#">Ссылка меню 1</a>
    <a href="#">Ссылка меню 2</a>
    <a href="#">Ссылка меню 3</a>
    <a href="#">Ссылка меню 4</a>
    </div>
</div>

Результат работы простого выпадающего меню на CSS