Горизонтальное меню CSS с Subnav - Установить активную вкладку

Question

Я использую какое-то меню css, оно выглядит примерно так: http://www.sohtanaka.com/web-design/examples/horizontal-subnav/

Единственная разница в том, что он использует простые ссылки в качестве субнава, я использую <ul class="subnav"> для каждой вкладки topnav.

Я создал класс CSS .active и установил его атрибуты так же, как #topnav li:hover

Когда он активен, я хочу, чтобы он выглядел так же, как и при наведении, также будет виден subnav, поскольку оба элемента :hover и .active в элементах topnav активируют свойство display субнав .

Проблема в том, что, когда у меня уже есть вкладка с классом .active, и я наведите на нее другие вкладки, их дочерние субнави также будут иметь display: block ..

Мне нужно решение, которое не зависит полностью от JavaScript для навигации. Но js можно использовать только для показа того, что активно, так как это не важно для навигации ..

Answer 1

Похоже, ваши CSS-правила просто нужно разделить. Так что вместо

.active, #topnav li:hover { rules here }

скопируйте только те свойства, которые вам нужны для .active и разделите их:

#topnav li:hover { rules here }
.active { subset of rules here }