タブキーを押して確認してください。
<ul class="menu">
<li>
<a href="#">menu1</a>
<ul>
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
ul, li {
list-style: none;
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
}
.menu {
display: flex;
width: 100%;
max-width: 360px;
}
.menu > li a {
display: block;
padding: 1rem 2rem;
border: 2px solid #000;
background: #369;
color: #fff;
text-decoration: none;
}
.menu > li a:hover,
.menu > li a:focus {
filter: brightness(1.2);
}
.menu > li > ul {
position: absolute;
opacity: 0;
width: 115px;
}
.menu > li:hover > ul {
opacity: 1;
}