<div class="drop">
<p>Меню</p>
<div class="dropdown_block">
<ul>
<li>Один</li>
<li>Два</li>
<li>Три</li>
<li>Четыре</li>
</ul>
</div>
</div>
1 ответ
Вот реализация на чистом CSS.
Если что-то будет не понятно, пишите объясню.
.drop {
display: inline-block;
width: 150px;
height: 30px;
position: relative;
color: #fff;
}
.drop p {
display: block;
width: 100%;
height: 30px;
line-height: 30px;
margin: 0;
padding: 0 10px;
box-sizing: border-box;
background: gray;
}
.drop .dropdown_block {
display: none;
width: 100%;
position: absolute;
top: 30px;
left: 0;
right: 0;
}
.drop:hover .dropdown_block,
.dropdown_block:hover {
display: block;
}
.drop ul {
display: block;
width: 100%;
background: gray;
padding: 0;
margin: 10px 0 0;
list-style: none;
max-height: 90px;
overflow: hidden auto;
}
.drop li {
display: lock;
width: 100%;
height: 30px;
line-height: 30px;
padding: 0 10px;
box-sizing: border-box;
}
.drop li:hover {
background: #555;
cursor: pointer;
}
<div class="drop">
<p>Меню</p>
<div class="dropdown_block">
<ul>
<li>Один</li>
<li>Два</li>
<li>Три</li>
<li>Четыре</li>
</ul>
</div>
</div>