<ul class="nav">
<li><a href="#">Level1</a></li>
<li><a class="main-item" href="javascript:void(0);" tabindex="1" >Открыть Leve2</a>
<ul class="sub-menu">
<li><a href="#1">подпункт 1</a></li>
<li><a href="#2">подпункт 2</a></li>
<li><a href="#3">подпункт 3</a></li>
</ul>
</li>
</ul>
ul {
list-style: none;
width: 250px;
}
.nav li ul {
display: none;
}
.sub-menu
{
display: none;
}
.main-item:focus ~ .sub-menu,
.main-item:active ~ .sub-menu,
.sub-menu:hover
{
display: block;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.