Как изменить расположить разделы меню в строку?

Распишите точнее что вам надо

- Вот данные, предоставленные вами:

<ul>
<li><a href="http://indexru.html"     rel="nofollow">Раздел 1</a><br></li> 
<li><a href="http://uslugi.html"      rel="nofollow">Раздел 2</a><br></li>
<li><a href="http://kontaktru.html"   rel="nofollow">Раздел 3</a><br></li>
<li><a href="http://about.html"       rel="nofollow">Раздел 4</a><br></li>
</ul>

- Вот одна из "песочниц", куда вам необходимо положить ваши данные: https://codepen.io/warsan/pen/KBwOJe
Когда вы подготовили всё это - можно смело задавать вопрос и предоставлять ссылки на "проблему"... )))
Помощники - они тоже люди и за вас "вышеизложенные движения" проделывать не желают...
- Итак, что делаем дальше? Можно, например, взять готовый шаблон "Спрятанное выпадающее меню" и скопировать оттуда css-стили и идентефикаторы, касающиеся непосредственно меню (их видно по HTML-коду))).

Мне нужно что-бы подменю открывалось по клику!. для этого я и хочу использовать focus. Подменю открывается замечательно. Но ссылки в подменю не работают. Полностью задача состоит в том, что подменю служит для выбора языка. Каждая ссылка служит для вызова страницы на соответствующем языке. Я бы хотел использовать focus т.к. не знаю JS. и он гораздо меньше занимает кода. (конечно можно взять js код из песочниц, но хотелось бы обойтись без этого)