Как изменить список для мобильного представления?

Question

[Mixa]

Есть сайт, у которого в меню есть пункт с выпадающими элементами. Но в мобильной версии нет надобности прятать дочерние элементы в подменю - можно показывать в одном уровне с другими пунктами. Посему стоит вопрос о том, как правильно убрать вложенность списка для мобильной версии.
Можно было б продублировать пункт меню с вложенными элементами и с помощью css один показывать в обычной версии, а в мобильной его прятать и наборот - показывать прежде скрытые. Но так по коду, получается, будет дубляж, не совсем элегантное решение. Возможно, есть вариант как можно другим способом при просмотре с мобильного устройства из такого вида

<li>пункт </li>
<li>пункт</li>
<li>пункт
<ul id="submenu">
<li>подпункт</li>
<li>подпункт</li>
<li>подпункт</li>
</ul>
</li>
<li>пункт</li>

можно получить

<li>пункт </li>
<li>пункт</li>
<li>пункт</li>

<li>подпункт</li>
<li>подпункт</li>
<li>подпункт</li>

<li>пункт</li>

Answer 1

[mrspd]

Занулите все стили в мобильной версии для #submenu, а потом для #submenu > li сделайте такие же как для корневого меню.