Здравствуйте,
при таком порядке ul li не работает (листинг внизу)
ul.nav li ul {
display: none; /*скрываем вложенные пункты*/
}
работает при порядке
<ul>
<li>
<ul>
....
</ul>
</li>
</ul>
можно подстроить стили чтобы работало в текущем порядке стилей? Меню генерируется сторонним скриптом и нет большого желания лезть в него.
<style>
/* Вертикальное выпадающее меню*/
body{
background: #DCDCDC;
}
/*блок меню*/
ul{
margin: 0;
padding: 0;
}
ul.nav li {
background: #B3B3FF;
border: 1px solid #FFFFFF;
list-style: none;
width: 150px; /*ширина блока меню*/
}
ul.nav li a {
text-decoration: none;
display: block;
padding: 5px 5px 5px 15px;
}
ul.nav li ul {
display: none; /*скрываем вложенные пункты*/
}
/*Выпадающее меню*/
ul.nav li:hover {
/* позиционирование вложенных элементов
* будет расчитыватьться относительно
* родительского элемента
*/
position: relative;
background: yellow;
}
ul.nav li:hover > ul {
display: block;
}
ul.nav li:hover ul{
position: absolute;
top: 0; /*Задаём координаты для вложенных пунктов*/
left: 150px; /*меню раскрывается вправо*/
}
</style>
<ul class="nav">
<li><a href="#">Главная категория</a></li>
<ul id="c1">
<li><a href="#">Подкатегория 1</a></li>
<ul id="c2">
<li><a href="#">Подкатегория 1.1</a></li>
<ul id="c3">
<li><a href="#">Подкатегория 1.1.1</a></li>
<li><a href="#">Подкатегория 1.1.2</a></li>
</ul>
<li><a href="#">Подкатегория 1.2</a></li>
</ul>
<li><a href="#">Подкатегория 2</a></li>
<ul id="c7">
<li><a href="#">Подкатегория 2.1</a></li>
<li><a href="#">Подкатегория 2.2</a></li>
</ul>
</ul>
</ul>