Необходимо сделать чтобы был изображен круг, при наведении на который открывалось выпадающее меню с текстом. Буду рад любой подсказке.
.maindiv{
background-color: #78a2b7;
height: auto;
margin: 5px;
border-radius: 40px 10px 40px 40px;
}
#maindiv_1{
width: 25%;
float:left;
}
#ul_1{
background-color: #0000FF;
width: 6%;
height: 3%;
overflow: hidden;
border-radius: 40px 40px 40px 40px;
transition: 5s;
}
#ul_1:hover{
width: 100%;
height: 35%;
display: list-item;
transition: 5s;
border-radius: 40px 10px 40px 40px;
border-bottom-width: 7px;
}
<div id='maindiv_1' class='maindiv'>
<div id='ul_1'>
<ul>
<li>Номер один</li>
<li>Номер два</li>
<li>Номер три</li>
</ul>
</div>
</div>