css выпадающее меню

[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>

[Black_Star]

https://jsfiddle.net/BlackStar1991/h94zjxtj/ Так что ли?

[Digo]

оно должно все раскрываться, т.е. в 1.1 пункте должны выпадать пункты 1.1.1 и 1.1.2 а сейчас все скопом, можно даже пусть главная категория и подкатегория 1, подкатегория 2 и т.д. сразу видны.

[Black_Star]

оно должно все раскрываться == а сейчас все скопом.
Я не понял что имеется ввиду.
Согласно здравой логике, возможно вы имели ввиду это?
https://jsfiddle.net/BlackStar1991/h94zjxtj/3/
Ваша главная ошибка что вы не правильно составляете многоуровненый список + забудьте про id селектор

[manisha]

css for dropdown
<style>
/* Style The Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>

<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>

[рони]

manisha,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.