Имею код для красивого меню, но на IPB не работает.

Хотелось бы разобраться в чем проблема

На XenForo работает как надо

<div class="section">
  <div class="secondaryContent">
      <h3>МЕНЮ</h3>
<script>
$(document).ready(function(){
   /* Скрипт будет выполнен после загрузки страницы */
       /* Смена эффекта для плагина easing */
   $.easing.def = "easeOutBounce";
   $('li.NavigationButton a').click(function(e){
   var dropDown = $(this).parent().next();
   /* Закрываем все другие списки, кроме текущего */
   $('.dropdown').not(dropDown).slideUp('slow');
   dropDown.slideToggle('slow');
   e.preventDefault();
   })
});

</script>

<!-- #1 --> 
<li class="menu">
<ul> 
<li class="NavigationButton">
<a href="#">Кнопка большая<span></span></a>
</li>
<li class="dropdown">
<ul>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>

</ul>
</li>
<!-- конец #1 -->

<!-- #2 -->
<li class="menu">
<ul> 
<li class="NavigationButton">
<a href="#">Кнопка большая<span></span></a>
</li>
<li class="dropdown">
<ul>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>

</ul>
</li>
<!-- конец #2 -->

<!-- #3 -->
<li class="menu">
<ul> 
<li class="NavigationButton">
<a href="#">Кнопка большая<span></span></a>
</li>
<li class="dropdown">
<ul>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>
<li><a href="" target="_blank">Ссылка</a></li>


</ul>
</li>
<!-- конец #3 -->
  </div>
</div>



<!-- CSS Стиль меню -->


<style>

li.NavigationButton a
{
margin: 4px 4px 0px 0px;/* Расстояние между кнопками */
}

/* Главные элементы списка */


li.NavigationButton a{
       width: 179px;
   -moz-box-shadow:inset 0px 1px 0px 0px #FFF;
   -webkit-box-shadow:inset 0px 1px 0px 0px #FFF;
   box-shadow:inset 0px 1px 0px 0px #FFF;
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #585858), color-stop(1, #B00C0C) );
   background:-moz-linear-gradient( center top, #585858 5%, #B00C0C 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#585858', endColorstr='B00C0C');
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
   border-radius:6px;
   border:1px solid #000;
   display:inline-block;
   color:#ffffff;
   font-family:arial;
   font-size:14px;
   font-weight:bold;
   padding:6px 24px;
   text-align: center;
   text-decoration:none;
   text-shadow:1px 1px 0px #000;
}

li.NavigationButton a:hover{
   text-decoration:none;
}

li.NavigationButton a span{
   height:44px;
   position:absolute;
   right:0;
   top:0;
   width:4px;
   display:block;
}

li.NavigationButton:active {
   position:relative;
   top:1px;
}


/* Эффекты при наведении */
li.NavigationButton a:hover{ background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8c0909), color-stop(1, #8c0909) );
   background:-moz-linear-gradient( center top, #8c0909 5%, #8c0909 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8c0909', endColorstr='#8c0909');
   background-color:#585858;}
/* Расширяющиеся списки */
.dropdown{

   display:none;
   padding-top:5px;
   width:100%;
}
/* Каждый элемент в таких списках */
li.dropdown a{

   width: 179px;
   border:1px solid #40392C;
   color:#CCCCCC;
   margin:2px 0;
   padding:4px 18px;
       -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
   -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
   box-shadow:inset 0px 1px 0px 0px #ffffff;
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
   background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
   background-color:#ededed;
   -moz-border-radius:6px;
   -webkit-border-radius:6px;
   border-radius:6px;
   border:1px solid #dcdcdc;
   display:inline-block;
   color:#777777;
   font-family:arial;
   font-size:11px;
   font-weight:bold;
   padding:6px 24px;
   text-align: center;
   text-decoration:none;
   text-shadow:1px 1px 0px #ffffff;
}

li.dropdown a:hover
{
text-decoration:none;
   background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
   background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
   filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
   background-color:#dfdfdf;
}
li.dropdown a:active {
   position:relative;
   top:1px;
}
</style>

Обратите внимание

"Board url", указанный вами в профиле, некорректен, либо недоступен на данный момент. Пожауйста, заполните его, потому что он скорее всего потребуется при диагностике вашей проблемы.

Хотелось бы разобраться в чем проблема

На XenForo работает как надо

Проблема в том, что в коде используется jquery, ipb работает на фреймворке prototype

Как переписать скрипт для того чтоб заработало