Меню с выпадающими меню подразделов в боковом виджете

У меня возникла следующая проблема:сайт у меня довольно громоздкий:очень много форумов и разделов в них.
Один из пользователей мне сделал замечание:о том,что трудно ориентироваться на сайте.
Хотелось бы сделать,как на некоторых сайтах :поместить все разделы главного меню слева, с выпадающими меню подразделов.
Такое возможно или нет?
Мой сайт: http://www.superhimik.com

Наподобие такого?

Уважаемая,Dana Domirani.Да именно такое.
Буду благодарен за любую помощь в решение данной проблемы

Так.

1. В боковой виджет помещаете код меню:

Код:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<div class="ptlnav"><ul id="menu">

<li>
<a href="#">Заголовок Категории 1</a>
<ul>
<li><a href="http://адрес подфорума.htm">Подфорум 1</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 2</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 3</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 4</a></li>
</ul>
</li>

<li>
<a href="#">Заголовок Категории 2</a>
<ul>
<li><a href="http://адрес подфорума.htm">Подфорум 1</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 2</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 3</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 4</a></li>
</ul>
</li>

</ul></div>

<script type='text/javascript'>
//<![CDATA[
function initMenu() {
  jQuery('#menu ul').hide();
  jQuery('#menu ul:first').show();
  jQuery('#menu li a').click(
    function() {
      var checkElement =  jQuery(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        jQuery('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
 jQuery(document).ready(function() {initMenu();});
//]]>
</script>

Заполняете меню нужными ссылками и названиями. Чтобы добавить нужное количество разворачивающихся списков, просто добавляете друг за другом блоки кода:

<li>
- этот заголовок будет отображаться в меню

<a href="#">Заголовок Категории 1</a>
<ul> <li><a href="ссылка">Подфорум 1</a></li> <li><a href="ссылка">Подфорум 2</a></li> <li><a href="ссылка">Подфорум 3</a></li> <li><a href="ссылка">Подфорум 4</a></li> </ul>	- этот список будет разворачиваться /сворачиваться по клику

</li>

Количество подфорумов значение не имеет. Самая первая категория (в коде указана как "Заголовок Категории 1") всегда будет развернута, в нее удобнее всего поместить одну ссылку, на правила форума, например.
После этого сохраняете виджет.

2. В персональную CSS добавляете стиль для меню:

Код:

/* общее обрамление меню */
.ptlnav {
border: #C8C5CF solid 1px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
border-radius: 8px;
background-color:#DCDCDC;
padding: 5px;
}

/* стиль заголовка категории */
ul#menu li a {
color: #fff;   
padding: 0.5em;
border: #C8C5CF solid 1px;
background-color: #708090;
}

/* подсветка заголовка категории при наведении */
ul#menu li a:hover {
background-color: #4F3C5F;
color: #fff;
}

/* стиль подфорумов */
ul#menu li ul li a {
  background: #F4F4F4;
  color: #574A5C;
  padding-left: 15px;
}

/* подсветка подфорумов при наведении */
ul#menu li ul li a:hover {
  background: #BDB8BD;
  border-left: 5px #4F3C5F solid;
  padding-left: 10px;
}

ul#menu a {
display: block;
text-decoration: none;   
}

ul#menu li {
margin-top: 1px;
}

Цвета меняете по желанию. Сохраняете.

Уважаемая,Dana Domirani.Премного благодарен за то,что вы уделили время и поделились своими глубокими знаниями в решение этой проблемы.
Мне только непонятно,что нужно вставлять в CSS код:"общее обрамление меню","стиль заголовка категории " и т.д.

Можете оставить как есть, но, скорее всего, Вы захотите изменить там цвета, чтобы меню походило по стилю к форуму.
background-color: #fff - это цвет фона блока
color: #fff - цвет текста в нем
border: #fff solid 1px - это бордюр (его цвет, стиль и толщина)
Вместо #fff подставьте тот цвет, который нужен.

я сделал все как надо, но размеры самого виджета (правого) не могу изменить.

В ПА > Модули > Виджеты форума

вбейте бОльшую ширину и сохраните.

Дана, скажите, а как сделать это горизонтальным меню? Я вставила сей скрипт в объявления и в горизонтальном расположении менюшек он смотрелся бы лучше, чем с вертикальными столбиками. И ещё: в объявлении второй скрипт\часть (первый скрипт из этого поста) жутко растягивает страницу

смотреть, что за скрипт:

Да, ещё. Решила я сделать в подфоруме подфорум. Написала, если думать логически, мало зная хтмл, то вроде бы там всё правильно. Но когда я нажимаю на подфорум, чтобы открыть его подфорум, категория сворачивается, но открывается с открытым подфорумом подфорума.

Код:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><div class="ptlnav"><ul id="menu">

<li>
<a href="#">Полезные ссылки</a>
<ul>
<li>
<a href="#">Для гостей</a>
<ul>
<li><a href="http://адрес подфорума.htm">Подфорум подфорума 1</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум подфорума 2</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум подфорума 3</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум подфорума 4</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум подфорума 5</a></li>
</ul>
</li>
<li><a href="http://адрес подфорума.htm">Подфорум 2</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 3</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 4</a></li>
</ul>
</li>
<li>
<a href="#">Для игры</a>
<ul>
<li><a href="http://адрес подфорума.htm">Подфорум 1</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 2</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 3</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 4</a></li>
</ul>
</li>
<li>
<a href="#">Акции</a>
<ul>
<li><a href="http://адрес подфорума.htm">Подфорум 1</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 2</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 3</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 4</a></li>
</ul>
</li>
<li>
<a href="#">Администрация</a>
<ul>
<li><a href="http://element.forum2x2.ru/u1">Selena Medi</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 2</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 3</a></li>
<li><a href="http://адрес подфорума.htm">Подфорум 4</a></li>
</ul>
</li>
</ul></div>
<script type='text/javascript'>
//<![CDATA[
function initMenu() {
  jQuery('#menu ul').hide();
  jQuery('#menu ul:first').show();
  jQuery('#menu li a').click(
    function() {
      var checkElement =  jQuery(this).next();
      if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        return false;
        }
      if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        jQuery('#menu ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
        return false;
        }
      }
    );
  }
 jQuery(document).ready(function() {initMenu();});
//]]>
</script>