Здравствуйте. Возник такой вопрос. При создании своего меню если в нём есть вложенные подменю то код имеет вид:
ul class="menu"
li
ul class="menu"
li
/li
...
/ul
/li
...
/ul
Собственно теперь вопрос можно ли подменю присвоить другой класс? Типа такого вида
ul class="menu"
li
ul class="second_menu"
li
/li
...
/ul
/li
...
/ul
Комментарии
Для чего?
ul.menu li a{
display: block;
text-align: center;
text-decoration: none;
color: #000;
padding: 15px 0 0;
height: 29px;
background: url(men_ite.png) no-repeat;
}
ul.menu li a:hover{
background: url(men_ite_hov.png) no-repeat;
}
ul.menu li.expanded a{
padding: 15px 0 0;
height: 30px;
background: url(men_exp.png) no-repeat;
}
ul.menu li.expanded a:hover{
background: url(men_exp_hov.png) no-repeat;
}
/* 2 */
ul.menu li ul li a,
ul.menu li ul li.collapsed a,
ul.menu li ul li.leaf a{
padding: 8px 0 0;
height: 23px;
background: url(men_ite2.png) no-repeat;
font-size: 90%;
}
ul.menu li ul li a:hover,
ul.menu li ul li.collapsed a:hover,
ul.menu li ul li.leaf a:hover{
background: url(men_ite2_hov.png) no-repeat;
}
ul.menu li ul li.expanded a{
padding: 8px 0 0;
height: 25px;
background: url(men_exp2.png) no-repeat;
}
ul.menu li ul li.expanded a:hover{
background: url(men_exp2_hov.png) no-repeat;
}
/* 3 */
ul.menu li ul li ul li a,
ul.menu li ul li ul li.collapsed a,
ul.menu li ul li ul li.leaf a{
padding: 5px 0 0;
height: 19px;
background: url(men_ite3.png) no-repeat;
font-size: 70%;
}
ul.menu li ul li ul li a:hover,
ul.menu li ul li ul li.collapsed a:hover,
ul.menu li ul li ul li.leaf a:hover{
background: url(men_ite3_hov.png) no-repeat;
}
ul.menu li ul li ul li.expanded a{
padding: 5px 0 0;
height: 21px;
background: url(men_exp3.png) no-repeat;
}
ul.menu li ul li ul li.expanded a:hover{
background: url(men_exp3_hov.png) no-repeat;
}
/* 4 */
ul.menu li ul li ul li ul li a,
ul.menu li ul li ul li ul li.collapsed a,
ul.menu li ul li ul li ul li.leaf a{
padding: 5px 0 0;
height: 19px;
background: url(men_ite4.png) no-repeat;
font-size: 70%;
}
ul.menu li ul li ul li ul li a:hover,
ul.menu li ul li ul li ul li.collapsed a:hover,
ul.menu li ul li ul li ul li.leaf a:hover{
background: url(men_ite4_hov.png) no-repeat;
}
/* UL */
ul.menu{
margin: 0 2px 32px; padding: 0 0 4px;
background: url(men_end.png) no-repeat bottom;
}
ul.menu li ul.menu{
margin: 0; padding: 0 0 7px;
background: url(men_end2.png) no-repeat bottom;
}
ul.menu li ul li ul.menu{
padding: 0 0 6px;
background: url(men_end3.png) no-repeat bottom;
}
ul.menu li ul li ul li ul.menu{
padding: 0 0 6px;
background: url(men_end4.png) no-repeat bottom;
}
/* LI */
ul.menu li{
margin: 0; padding: 0;
list-style: none;
}
Вопрос снимается. С помощью DHTML меню и CSS можно сделать что хотел.