Всплывающее меню HTML

HTML-сайт в блокноте. Урок информатики. Препод сказала сделать выпадающее меню при помощи списков (<ol>,<ul>). Объясню подробнее: Вот у меня есть обычный маркированный список
1.qwe
2.asd
3.zxc
4.rty.
Каждый из них - гиперссылка. Мне нужно сделать, чтобы при нажатии на одну из них (или несколько, не имеет значения), появлялись еще 4 строки, которые также будут являться гиперссылками.
Всяко разно пытался, а получалось только так:

,т.е. эти гиперссылки (1,2,3, подпункты "Что такое дота?") видны изначально, без нажатия. Помогите разобраться, пожалуйста.
Нужно использовать фреймы, таргеты, и <ul>, <ol>. Что-то из этого или все вместе

По дате

По рейтингу

viktor_13773

Мудрец

1г

Примерно так

12345678910111213141516171819202122232425262728

 <body> 
  <style> 
  .sub-menu  
{  
   display: none;  
}  
.main-item:focus ~ .sub-menu,  
.main-item:active ~ .sub-menu,  
.sub-menu:hover  
{  
   display: block;  
} 
</style> 
  
   
<ul><ol> 
<li><a href="#">Valve</a></li> 
<li><a class="main-item" href="javascript:void(0);" tabindex="1"  href="#">Что такое дота?</a> 
    <ul class="sub-menu"><ol> 
        <li><a href="#">Основные механики</a></li> 
        <li><a href="#">Киберспорт</a></li> 
      </ol></ul> 
</li> 
<li><a href="#">Откуда пошли истоки</a></li>  
  <li><a href="#">Выводы</a></li> </ol> 
</ul> 
 
</body>