Ну вот смотрите, разберем такой пример:
<div class="moduletable_menu">
<h3>Menu name</h3>
<ul class="menu">
<li class="item1"><a href="#"><span>item1</span></a></li>
<li id="current" class="parent active item27"><a href="#"><span>item27</span></a>
<ul>
<li class="item34"><a href="#"><span>item34</span></a></li>
<li class="item35"><a href="#"><span>item35</span></a></li>
</ul>
</li>
<li class="item2"><a href="#"><span>item2</span></a></li>
</ul>
</div>
Здесь есть родительские и дочерние пункты меню.
Дочерние пункты меню отличаются от родительских тем, что их ссылки лежат в теге
li, у которого есть класс
parent.
Небольшое отступление.Такая запись классов:
class="parent" class="active item27" неправильна, так как
class="parent" перебивается
class="active item27" и не будет виден браузером.
При таком подходе
class="parent active item27" в задании классов для элементов, создается возможность обращаться к этому элементу разными способами.
В чем удобство такого подхода?
В том, что Вы можете в стилевых свойствах задавать комбинации этих классов.
К примеру, для пункта меню у которого есть подменю (parent) и оно в данный момент активно (active), можно прописать такое свойство:
.moduletable_menu li.parent.active a{
background: red;
color: white;
}
Eсли у Вас несколько пунктов с подменю, то можно индивидуально оформить каждый из них, обращаясь к классу соответствующего item'а:
.moduletable_menu li.parent.item27 a{
background: red;
color: white;
}
Итак, вернемся к примеру.Для оформления родительских пунктов меню пишем стили:
[1]
.moduletable_menu li a{
background: red;
color: white;
}
При такой записи
все пункты будут окрашены красным фоном и текст в них белым цветом.
Идем вглубь, чтобы придать подпунктам свой стиль. Добавляем ниже такой код:
[2]
.moduletable_menu li.parent a{
background: green;
color: yellow;
}Пункты подменю окрашиваются в зеленый цвет с желтым текстом.
При этом, захватывается и родительский пункт подменю.
Чтобы оформить только внутренние пункты, надо его исключить из этого свойства. Т.е. прописывать его не для ссылок в li.parent, а глубже:
[2.1]
.moduletable_menu li.parent li a{
background: green;
color: yellow;
}Теперь выделим активный пункт меню. Отличается он добавочным классом active. Дописываем ниже:
[3]
.moduletable_menu li.active a{
background: black;
font-weight: bold;
}И что видим, все подпункты меню переняли свойство font-weight: bold; и стали жирными.
Это произошло из-за того, что они попадают в то же условие — .moduletable_menu li.active a, т.е. все подпункты лежат с этом li.active.
Значит для них нам надо прописать свойство, которое исключает данное оформление:
[2.1]
.moduletable_menu li.parent li a{
background: green;
color: yellow;
font-weight: normal;
}Можно, к примеру, оформить индивидуально подпункт с item35:
[4]
.moduletable_menu li.parent li.item35 a{
background: blue;
color: red;
}Полный код страницы примера (во вложении файл menu.zip):
<html>
<head>
<style>
/*[1]*/
.moduletable_menu li a{
background: red;
color: white;
}
/*[2.1]*/
.moduletable_menu li.parent li a{
background: green;
color: yellow;
font-weight: normal;
}
/*[3]*/
.moduletable_menu li.active a{
background: black;
font-weight: bold;
}
/*[4]*/
.moduletable_menu li.parent li.item35 a{
background: blue;
color: red;
}
</style>
</head>
<body>
<div class="moduletable_menu">
<h3>Menu name</h3>
<ul class="menu">
<li class="item1"><a href="#"><span>item1</span></a></li>
<li id="current" class="parent active item27"><a href="#"><span>item27</span></a>
<ul>
<li class="item34"><a href="#"><span>item34</span></a></li>
<li class="item35"><a href="#"><span>item35</span></a></li>
</ul>
</li>
<li class="item2"><a href="#"><span>item2</span></a></li>
</ul>
</div>
</body>
</html>
При этом, получается такое вот замысловатое оформление пунктов меню и подменю:
Думаю, что дальше разберетесь и со своим примером.
Удачи!
