Срабатывание функции только для потомка

[Gonzo]

Делаю древовидное 3-уровневое меню.
По клику на Плюсе (он есть перед названием пункта меню, если этот пункт содержит подменю) должно раскрываться подменю. Обратите внимание: не при наведении мыши, а при клике на Плюсе.
При клике на самом пункте меню, должен происходить переход к выбранному разделу (с этим проблем нет). Вот что у меня есть на данный момент:

<SCRIPT TYPE="text/javascript">

function toggleList(eTarget, Level)
{ 
 eTarget.style.display == "none" ? eTarget.style.display = "block" : eTarget.style.display = "none";
 eTarget.style.color = 'black';
}

function flashMe(eSrc, sColor) 
{
 eSrc.style.color=sColor
}

</SCRIPT>

<STYLE TYPE="text/css">
  #List 
    {
	 list-style: none;
     color: black;
     padding: 0; 
     margin-left: 10px;
    }
</STYLE>

<div>
<UL ID="List" NAME="List">
    <LI ONCLICK="toggleList(this.children[1],1)"
        ONMOUSEOVER="flashMe(this,'red')"
        ONMOUSEOUT="flashMe(this,'black')"
        TITLE="Щелкни и раскрой"
        STYLE="cursor:hand;">+&nbsp;<a href="/e-store/xml_catalog/93/">Комплектующие для ПК</a>
    <UL ID="List"
        NAME="List"
        STYLE="display:none; cursor: default;">
	  <LI ONCLICK="toggleList(this.children[1],2)"
		  ONMOUSEOVER="flashMe(this,'red')"
          ONMOUSEOUT="flashMe(this,'black')"
          TITLE="Щелкни и раскрой"
          STYLE="cursor:hand;">+&nbsp;<a href="/e-store/xml_catalog/94/">06. Видеокарты, ТВ-тюнеры</a>
	  <UL ID="List"
	      NAME="List"
          STYLE="display:none; cursor: default;">
	    <LI ONMOUSEOVER="flashMe(this,'red')"
            ONMOUSEOUT="flashMe(this,'black')"
            TITLE="Нераскрывающийся список"
            STYLE="cursor:hand;">&nbsp;&nbsp;&nbsp;<a href="/e-store/xml_catalog/95/">06. TB-тюнеры, платы видеомонтажа</a>
	  </UL>
	 <LI ONMOUSEOVER="flashMe(this,'red')"
        ONMOUSEOUT="flashMe(this,'black')"
        TITLE="Нераскрывающийся список"
        STYLE="cursor:hand;">&nbsp;&nbsp;&nbsp;<a href="/e-store/xml_catalog/102/">Тестовый подраздел 2-ого уровня</a>
	</UL>
        <LI ONMOUSEOVER="flashMe(this,'red')"
        ONMOUSEOUT="flashMe(this,'black')"
        TITLE="Нераскрывающийся список"
        STYLE="cursor:hand;">&nbsp;&nbsp;&nbsp;<a href="/e-store/xml_catalog/100/">Клавиатуры и манипуляторы</a>
       <LI ONMOUSEOVER="flashMe(this,'red')"
        ONMOUSEOUT="flashMe(this,'black')"
        TITLE="Нераскрывающийся список"
        STYLE="cursor:hand;">&nbsp;&nbsp;&nbsp;<a href="/e-store/xml_catalog/99/">Мониторы</a>
       <LI ONMOUSEOVER="flashMe(this,'red')"
        ONMOUSEOUT="flashMe(this,'black')"
        TITLE="Нераскрывающийся список"
        STYLE="cursor:hand;">&nbsp;&nbsp;&nbsp;<a href="/e-store/xml_catalog/96/">Ноутбуки, нетбуки</a>
       <LI ONMOUSEOVER="flashMe(this,'red')"
        ONMOUSEOUT="flashMe(this,'black')"
        TITLE="Нераскрывающийся список"
        STYLE="cursor:hand;">&nbsp;&nbsp;&nbsp;<a href="/e-store/xml_catalog/97/">Персональные компьютеры</a>
       <LI ONMOUSEOVER="flashMe(this,'red')"
        ONMOUSEOUT="flashMe(this,'black')"
        TITLE="Нераскрывающийся список"
        STYLE="cursor:hand;">&nbsp;&nbsp;&nbsp;<a href="/e-store/xml_catalog/101/">Программное обеспечение</a>
       <LI ONMOUSEOVER="flashMe(this,'red')"
        ONMOUSEOUT="flashMe(this,'black')"
        TITLE="Нераскрывающийся список"
        STYLE="cursor:hand;">&nbsp;&nbsp;&nbsp;<a href="/e-store/xml_catalog/98/">Серверы и системы хранения данных</a>
        </UL>
    </UL>
</div>

Проблема в следующем:
при клике по Плюсу дочернего элемента функция отрабатывает для всех элементов верхнего уровня, т.е. для тех, в который вложен наш элемент, по которому непосредственно был произведен клик.
Необходимо как-то обойти это.

[DNCH]

function toggleList(eTarget, Level)
{
eTarget.style.display == "none" ? eTarget.style.display = "block" : eTarget.style.display = "none";
eTarget.style.color = 'black';

event.cancelBubble=true;

}