В каком порядке указывать id, class, tag, subtag в CSS?

нет. неправильно. class="menubtn1" у элемента li
значит, чтобы указать стиль для этого элемента li
нужно:
#topPan ul li.menubtn1 { ...}
для элемента <a> внутри него:
#topPan ul li.menubtn1 a { ...}

но на самом деле, обычно можно не указывать классы внутри элемента c id (если внутри этого элемента не используются другие подобные)
т. е. если внутри div id="topPan" нет других li, кроме li class="menubtn1", то достаточно будет
#topPan ul li { ...}
Во многих случаях достаточно и #topPan li { ...}
если нет других ссылок, кроме ссылок внутри этих li, то для ссылок:
#topPan a { ...}

если надо выбрать селектором элемент с определенным классом, или id, то без пробела:
a.my_class { ...} - для <a class="my_class">
a .my_class { ...} - для элемента c class="my_class" внутри элемента <a>

расположение в селекторе по порядку - от родителя к детям - как стоит в html.
а через ...опу надо лезть, потому как:
#topPan ul li { ...}
нельзя переписать с помощью
.menubtn1 { ...}
и в данном случае достаточно одного div#topPan (если внутри все li одинаковы)

В общем, все зависит от ситуации - чем проще вы пишете и чем меньше указываете селекторов, тем проще потом "переписать" правила.
Но так, чтобы при этом не пришлось писать "лишние" классы и айди. Краткость - сестра таланта))

зачем же через ...опу лезть? можно сразу указать класс
.menubtn1 { ...}
но если надо чтобы именно в топплане этот класс был такой то так и укажите
#topPan .menubtn1 { ...}
последовательность нужна если вы только теги юзаете а с классами и ИД все проще.