<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; 
} 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.