Требуется помощь с вертикальным выпадающим меню

[Mila]

Делаю в сайдбаре вертикальное выпадающие меню.

Возникла проблема с версткой - при нажатии на ссылку <li><a href="">Подкатегория 1.3</a>

выпадающий список 2го уровня <ul class="children2"> наезжает на нижерасположенный пункт меню <li><a href="">Категория 2</a></li>

Причем, этого не происходит, если вместо <ul class="children1"> поставить просто <ul>.

К сожалению, этот класс добавляет по умолчанию сам движок.

HTML:

<ul id="menu"> 
	<li class="current-cat"><a href="" title="">Категория 1</a>
	   <ul class="children">
			<li><a href="">Подкатегория 1.1</a></li>
			<li><a href="">Подкатегория 1.2</a></li>
			<li><a href="">Подкатегория 1.3</a>
					<ul class="children">
						<li><a href="">Подкатегория 1.3.1</a></li>
						<li><a href="">Подкатегория 1.3.2</a></li>
						<li><a href="">Подкатегория 1.3.3</a></li>
					</ul>
				</li>
		 </ul>
	 </li>

	 <li><a href="">Категория 2</a></li>
</ul>

CSS:

/************************************************
* menu-primary				*
************************************************/

#menu {
  float: left;
  width: 238px;
  border: 1px solid #ddd;
  clear: both;
}
#menu li {  
  width: 238px;
  list-style-type: none;
  font-size: 13px;
  font-weight: normal;
  text-align: left;
  margin: 0;
  padding: 0;
  clear: both;
}
#menu li a:link, #menu li a:visited {
  width: 218px;
  height: 17px;
  background: url('images/sid_link.jpg');
  margin: 0;
  padding: 5px 10px 5px 10px;
  font-size: 13px;
  color: #333; 
  display: block;
  clear: both;
}

#menu li a:hover, #menu li a:active, #menu li.current-cat a {
  width: 218px;
  height: 17px;
  background: url('images/sid_active.jpg');
  margin: 0;
  padding: 5px 10px 5px 10px;
  font-size: 13px;
  color: #333; 
  clear: both;
}

/************************************************
* menu children	1				*
************************************************/

#menu ul {
  float: left;
  width: 238px;
  height: auto;
  margin: 0 0 10px 0;
  clear: both;
}
#menu ul li {
  background: none;
  width: 238px;
  height: 17px;
  margin: 0;
  padding: 3px 0 3px 12px;
  font-size: 13px;
  color: #333; 
  clear: both;
}
#menu ul li a:link, #menu ul li a:visited {
  width: 218px;
  height: 17px;
  background: transparent url('images/arrow.jpg') left 7px no-repeat;
  margin: 0;
  padding: 3px 0 3px 12px;
  font-size: 13px;
  color: #333; 
}
#menu ul li a:hover, #menu ul li a:active, #menu ul li.current-cat a {
  width: 218px;
  height: 17px;
  background: transparent url('http://localhost/wordpress.ru/wp-content/themes/TraveltoUkraine/images/arrow_active.jpg') left 7px no-repeat;
  margin: 0;
  padding: 3px 0 3px 12px;
  font-size: 13px;
  color: #347500;
}

/************************************************
* menu children	2				*
************************************************/

#menu ul ul {
  float: left;
  width: 238px;
  height: auto;
  margin: 0 0 0px 0;
  clear: both;
}
#menu ul ul li {
  background: none;
  width: 238px;
  margin: 0;
  padding: 3px 0 3px 15px;
  font-size: 13px;
  color: #333; 
  list-style-type: none;
  clear: both;
}
#menu ul ul li a:link, #menu ul ul li a:visited {
  width: 218px;
  background: url('images/arrow_children.jpg') left 7px no-repeat;
  margin: 0;
  padding: 0 0 0 8px;
  font-size: 13px;
  color: #333; 
}

#menu ul ul li a:hover, #menu ul ul li a:active, #menu ul ul li.current-cat a {
  width: 218px;
  background: url('images/activearrow_children.jpg') left 7px no-repeat;
  margin: 0;
  padding: 0 0 0 8px;
  font-size: 13px;
  color: #347500;
}

/************************************************
* display menu					*
************************************************/

#menu ul,
#menu ul ul,
#menu ul ul ul { display: none; }

#menu li:hover ul,
#menu li:hover ul li:hover ul,
#menu li:hover ul li:hover ul li:hover ul { display: block; }

Чтобы проблема стала понятнее, вот картинка: http://s44.radikal.ru/i105/1011/7a/7f8595db91cb.jpg

Помогите, плиз, это исправить.

Edited November 17, 2010 by Mila

[CEBEP]

Я не вчитывался а протестировал: выложенный код работает не так как то что на приложенной картинке. Он выводит всё дерево подменю того пункта на который наведена мышь. Это явление регулируется последними строками css кода. То что описано на картинке может быть вызвано неудачными комбинациями отступов, расположением html(вряд ли) и злоупотреблением left/right в комбинации с position.

Ещё возможно был внедрён какой-то лишний JS в котором, при построении большинства ниспадающих меню, необходимости нет, что компетентно доказал один из обитателей форума. Уверен, вам удастся найти топик где описано ниспадающее меню без JavaScript.

[Mila]

CEBEP, у меня в стилях нет ни одного position, поэтому его сочетание с left-right не может вызывать такой ошибки.

Также, для этого меню я не использую никаких скриптов, только CSS.

Проблема появляется только при использовании этого меню в wordpress-теме, потому что wordpress по умолчанию добавляет к дочерним спискам class="children".

Без этого класса меню выглядит нормально.

И еще, если бы я знала, как решить эту проблему самостоятельно, я бы не просила помощи в форуме.

Увы, помощь все еще нужна...

Edited November 17, 2010 by Mila