Code
Заметьте, что идентификатор (параметр id тега DIV) у каждого подменю свой, а имя класса одно на всех. Это позволяет устанавливать характеристики слоя одновременно, и в то же время, изменять атрибуты стиля для каждого слоя индивидуально.
Стиль для меню будет зависеть от того, какой вид меню и подменю вы хотите использовать. Но в любом случае элементы с классом submenutext скрываются от просмотра с помощью атрибута display со значением none (пример 2). Также, чтобы не происходило смещение текста под меню, требуется установить высоту подменю (селектор #submenu), добавив параметр height с подходящим значением.
Пример 2. Стиль для изменения вида меню
Остается только добавить скрипт. Создаем свою функцию subMenu, в качестве аргументов используется указатель на текущую вкладку (переменная obj) и указатель на идентификатор подменю (переменная menu). Аргумент obj требуется, чтобы изменять стиль активной вкладки через метод className. Ему присваивается имя класса tabactive, свойства которого задаются в стилях (пример 3). При этом все необходимые свойства оформления активной вкладкой хранятся в одном месте и их легко модифицировать. Чтобы скрыть и отобразить нужное подменю, изменяем свойство display определенного слоя через функцию getElementById. Переменные prevtab и prevmenu нужны, чтобы сохранять соответственно указатель на предыдущую активную вкладку и указатель на то подменю, которое отображалось в последний раз. Это позволяет восстанавливать первоначальные свойства данных объектов.
Пример 3. Скрипт для отображения подменю
Остается теперь все свести воедино и получить нужный код для создания меню с подменю (пример 4).
Пример 4. Окончательный код
...