Всем доброго времени суток!
Вопрос от новичка в JS:
Есть горизонтальное меню с выпадающим подменю организаваное через ul-li. Стандартным CSS получается иметь всегда выделенный только один элемент под курсором при помощи hover. Я хочу оставлять выделенным пункт меню при переходе на подменю. Для этого мне нужно пункту меню поменять свойство. Статически это решено так:
<ul class="menu" id="main-menu">
<li name="about"><a href="#">Телефоны</a>
<ul>
<li onmouseover="mv(1)" onmouseout="mv(2)"><a href="/">Nokia</a></li>
...
function mv(i)
{if (document.)
switch (i)
{
case 1:
pr=document.getElementsByName('about')[0];
pr.style.backgroundColor='#ffffff';
brake;
case 2:
pr=document.getElementsByName('about')[0];
pr.style.backgroundColor='transparent';
}
}
Но как можно это сделать гибче, чтобы каждому li не прописывать onmouseover и onmouseout...
Я понимаю, что в функции нужно определять, если активен элемент из подменю, то подняться на уровень выше и поменять у родителя свойство, и если он теряет фокус мыши то отменять установленное свойство...но я не знаю как определить, что выбран элемент подменю (хотя можно использовать ID для каждого подменю элемента, но тогда пропадает универсальность).
Хотелось бы иметь код, привязанный только к такой структуре
<ul class="menu" id="main-menu">
<li>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
--------------------------------------------------------------------
Best regards.
Alex