Выпадающее мини-меню

Доброго времени суток )

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

Вот , к примеру у нас стоят такие менюшки ( ставили мы их код в описание форумов)

Спойлер:

В результате, они стали под названиями форумов и при щелчке на стрелку, выпадает меню с темами.

Я просто хочу другое меню вместо такого.

К примеру, что-то типа :



Это возможно?

Вариант для добавления меню в описание форумов
ПА > Общие > Категории и форумы > нужный подфорум - настройки  > Описание



Ставите туда код меню:

Код:

<ul class="menu_p">
   <li>
      <p>Заголовок меню</p>
      <ul>
         <li><a href="#">Пункт первый </a></li>
         <li><a href="#">Пункт два</a></li>
         <li><a href="#">Пункт идущий третьим</a></li>
         <li><a href="#">Пункт четвертый и последний</a></li>
      </ul>
   </li>
</ul>

Замените # на ссылки, например https://help.forum2x2.ru/forum
Замените названия пунктов Пункт первый, Пункт два и остальные — на свои собственные.

а в CSS добавьте:

Код:

.menu_p, .menu_p ul {
        margin: 0;
        padding: 0;
        list-style: none;
}
.menu_p {
        width: auto;
        margin: 2px;
}
.menu_p:before, .menu_p:after {
        content: "";
        display: table;
}
.menu_p:after {
        clear: both;
}
.menu_p {
        zoom:1;
}
.menu_p li {
        float: left;
        position: relative;
        margin-right: 10px;
}
.menu_p p {
        float: left;
        padding: 0;
        outline: none;
}
.menu_p ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 28px;
        left: 0;
        z-index: 9999;
        background: #FFEDE1;
        border: 1px solid #000;
        border-radius: 8px;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
}
.menu_p li:hover > ul {
        opacity: 1;
        visibility: visible;
        margin: 0;
}
.menu_p ul ul {
        top: 0;
        left: 150px;
        margin: 0 0 0 20px;
        _margin: 0; /*IE6 only*/
}
.menu_p ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
}
.menu_p ul a {
        padding: 6px;
        margin: 5px;
        _height: 10px; /*IE6 only*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
        outline: none;
}
.menu_p ul a:hover {
        background-color: #FFA76F;
        margin: 5px;
        border-radius: 5px;
}

P.S. если нужны два пункта рядом — тогда:

Код:

<ul class="menu_p">
   <li>
      <p>Заголовок меню</p>
      <ul>
         <li><a href="#">Пункт первый </a></li>
         <li><a href="#">Пункт два</a></li>
         <li><a href="#">Пункт идущий третьим</a></li>
         <li><a href="#">Пункт четвертый и последний</a></li>
      </ul>
   </li>
   <li>
      <p>Заголовок меню 2</p>
      <ul>
         <li><a href="#">2 Пункт первый </a></li>
         <li><a href="#">2 Пункт два</a></li>
         <li><a href="#">2 Пункт идущий третьим</a></li>
         <li><a href="#">2 Пункт четвертый и последний</a></li>
      </ul>
   </li>
</ul>

спасибо)
получилось)))