Как расположить элементы дополнительного меню горизонтально?
Как вариант.
<ul class="submenu">
  <div class="submenu-items">
    <li><a href="#">Аудио</a></li>
    <li><a href="#">Видео</a></li>
  </div>
</ul>

.submenu-items {
  display: flex;
  flex-direction: row;
}

.submenu li{
  display: inline-block; // убираем
}
Вообще данный CSS кусок выглядит в меру корректным. Поэтому проверяй что перекрывает\мешает выполнению этого кода.

Дебаггер тебе в помощь.

Из альтернатив, кстати, можешь не display:block давать submenu, а display:flex. Но, чтобы понимать, как это работает, почитай документацию\гайды по флексам.