[Digo]

Здравствуйте,

при таком порядке 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>