Пример CSS-разметки: хорошее двухуровневое меню CSS+JS

<DIV id=xcx_tabmenu>
<DIV класс=cx_tabmenu id=cx_tabmenu>
<DIV id=ddimagetabs>
<A href="http://www.downcodes.com/" target="_blank" class=sclink id=sclink1 onMouseOver="expandcontent('sc1', this)">Главная</A>
<A class=sclink id=sclink2 onMouseOver="expandcontent('sc2', this)" href="#">Компания</A>
<A class=sclink id=sclink3 onMouseOver="expandcontent('sc3', this)" href="#">Продукты</A>
<A class=sclink id=sclink4 onMouseOver="expandcontent('sc4', this)" href="#">Наши работы</A>
<A class=sclink id=sclink5 onMouseOver="expandcontent('sc5', this)" href="#">Новости</A>
<A class=sclink id=sclink6 onMouseOver="expandcontent('sc6', this)" href="#">Сохранить</A> </DIV>
<BR style="ОЧИСТИТЬ: слева">
<DIV id=tabcontentcontainer>
<DIV class=tabcontent id=sc1></DIV>
<DIV class=tabcontent id=sc2><A
href="http://www.downcodes.com/">О нас</A> <A
href="http://www.downcodes.com/">Что нам делать?</A> <A
href="http://www.downcodes.com/">Познакомьтесь с командой</A> <A
href="http://www.downcodes.com/">Почему стоит работать с нами?</A> <A
href="http://www.downcodes.com/">Политика качества</A> <A
href="http://www.downcodes.com/">Условия</A> <A
href="http://www.downcodes.com/">Отзывы</A> <A
href="http://www.downcodes.com/">Тур по Clexus</A> </DIV>
<DIV class=tabcontent id=sc3><A
href="#">Клексус Частный
Сообщения</A> <A href="#">Изображение
Галерея</A> <A href="#">Клиент
Руководство</A> <A
href="#">Шаблон
Работает</A> </DIV>
<DIV class=tabcontent id=sc4><A
href="#">Интернет
Дизайн</A> <A
href="#">Интернет
Развитие</A> <A
href="#">Логотип
Дизайн</A> <A
href="#">Печать
Дизайн</A> </DIV>
<DIV class=tabcontent id=sc5><A
href="#">Новости Clexus</A>
<A href="#">Джумла
Новости</A> <A
href="#">Общие новости</A>
</DIV>
<DIV class=tabcontent id=sc6></DIV>
</DIV></DIV></DIV>

тело {текст-выравнивание: центр}
.cx_tabmenu {
PADDING-TOP: 2 пикселя; ЦВЕТ ФОНА: #474747; ШИРИНА: 790 пикселей;
}
#ddimagetabs {
ЗАПОЛНЕНИЕ СЛЕВА: 10 пикселей
}
#ddimagetabs А {
PADDING-RIGHT: 20px; BORDER-TOP: #666666 1px сплошной; PADDING-LEFT: 20px; FONT-SIZE: 12px; FLOAT: LINE-HEIGHT: 33px; 2px; PADDING-TOP: 0px; СЕМЕЙСТВО ШРИФТОВ: Verdana, Arial, Helvetica, ВЫСОТА: 33 пикселя; ВЫРАВНИВАНИЕ ТЕКСТА: по центру;
}
#ddimagetabs А:наведите {
ГРАНИЦА-ВЕРХ: #ffffff, 1 пиксель, сплошной; ФОН: url(../images/cx_menu_hover.jpg) #363636, центральный низ без повторов ЦВЕТ: #d7dcbe;
}
#ddimagetabs А.текущий {
ГРАНИЦА-ВЕРХ: #ffffff, 1 пиксель, сплошной; ФОН: url(../images/cx_menu_hover.jpg) #363636, центральный низ без повторов ЦВЕТ: #d7dcbe;
}
А.sclink: ссылка {

}
А.sclink:посетил {

}
А.sclink:наведите {

}
#sclink1 {

}
#ddimagetabs #sclink1 {

}
#ddimagetabs #sclink1:hover {
BORDER-TOP: #ff9900, 1 пиксель, сплошной.
}
#ddimagetabs .current#sclink1 {
BORDER-TOP: #ff9900, 1 пиксель, сплошной.
}
#sc1 А:ссылка {

}
#sc1 A:посетил {

}
#sc1 A:наведите {

}
#ddimagetabs #sclink2 {

}
#ddimagetabs #sclink2:hover {
BORDER-TOP: #990099 1 пиксель, сплошной.
}
#ddimagetabs .current#sclink2 {
BORDER-TOP: #990099 1 пиксель, сплошной.
}
#sc2 А:ссылка {

}
#sc2 A:посещен {

}
#sc2 A:наведите {

}
#ddimagetabs #sclink3 {

}
#ddimagetabs #sclink3:hover {
BORDER-TOP: #0099cc, 1 пиксель, сплошной.
}
#ddimagetabs .current#sclink3 {
BORDER-TOP: #0099cc, 1 пиксель, сплошной.
}
#sc3 А:ссылка {

}
#sc3 A:посетил {

}
#sc3 A:наведите {

}
#ddimagetabs #sclink4 {

}
#ddimagetabs #sclink4:hover {
BORDER-TOP: #78ba00 1 пиксель, сплошной
}
#ddimagetabs .current#sclink4 {
BORDER-TOP: #78ba00 1 пиксель, сплошной
}
#sc4 А:ссылка {

}
#sc4 A:посещен {

}
#sc4 A:наведите {

}
#ddimagetabs #sclink5 {

}
#ddimagetabs #sclink5:hover {
BORDER-TOP: #99cccc, 1 пиксель, сплошной.
}
#ddimagetabs .current#sclink5 {
BORDER-TOP: #99cccc, 1 пиксель, сплошной.
}
#sc5 А:ссылка {

}
#sc5 A:посещен {

}
#sc5 A:наведите {

}
#ddimagetabs #sclink6 {

}
#ddimagetabs #sclink6:hover {
BORDER-TOP: #999999 1 пиксель, сплошной.
}
#ddimagetabs .current#sclink6 {
BORDER-TOP: #999999 1 пиксель, сплошной.
}
#sc6 А:ссылка {

}
#sc6 A:посещен {

}
#sc6 A:наведите {

}
#ddimagetabs #sclink7 {
ЗАПОЛНЕНИЕ-ПРАВО: 30 пикселей; ПОЛЯ-ВЕРХУ: #ff0000 1 пиксель; ЗАПОЛНЕНИЕ-ЛЕВО: 30 пикселей; ПОЛЬ-ЛЕВО: 100 пикселей; ЦВЕТ: #d7dcbe;
}
#ddimagetabs #sclink7:hover {
BORDER-TOP: #ef7777 1px сплошной ФОН: url(../images/cx_menu_hover_my.jpg) #cf1919 без повторов по центру внизу;
}
#ddimagetabs .current#sclink7 {
BORDER-TOP: #ef7777 1px сплошной ФОН: url(../images/cx_menu_hover_my.jpg) #cf1919 без повторов по центру внизу;
}
#sc7 А:ссылка {

}
#sc7 A:посещен {

}
#sc7 A:наведите {

}
#tabcontentcontainer {
ФОН: url(../images/sub_menu_bg.jpg) #fcfcfa повтор-x ШИРИНА: 790 пикселей ВЫСОТА: 27 пикселей;
}
.tabcontent {
ДИСПЛЕЙ: нет. PADDING-TOP: 4 пикселя;
}
.tabcontent А:ссылка {
PADDING-LEFT: 10px; FLOAT: слева; PADDING-LEFT: 3px; CURSOR: LINE-HEIGHT: 18px; СЕМЕЙСТВО ШРИФТОВ: Verdana, Arial, Helvetica, без засечек. ВЫСОТА: 18 пикселей; ОФОРМЛЕНИЕ ТЕКСТА: нет;
}
.tabcontent A:посещенный {
PADDING-LEFT: 10px; FLOAT: слева; PADDING-LEFT: 3px; CURSOR: LINE-HEIGHT: 18px; СЕМЕЙСТВО ШРИФТОВ: Verdana, Arial, Helvetica, без засечек. ВЫСОТА: 18 пикселей; ОФОРМЛЕНИЕ ТЕКСТА: нет;
}
.tabcontent A:hover {
ФОН: url(../images/cx_submenu_hover_grey.jpg) центральный низ без повтора ЦВЕТ: #000000;
}
#active_submenu {
ФОН: url(../images/cx_submenu_hover.jpg) #666666 неповторяющийся центральный низ ЦВЕТ: #fff;
}