разворачивающееся меню навигации

Доброго времени суток  Будьте любезны, помогите... 
Вот  здесь
Уже не первый раз пытаюсь сделать это разворачивающееся меню и оставляю затею, но всетаки хочу этого добиться. Перечитала все ваши рекомендации по данной теме на форуме, перепробовала все, а воз и ныне там. 
 Несколько раз переделывала, искала, где ошиблась... Пользовалась рекомендациями вот отсюда https://help.forum2x2.ru/t16763-topic , но только 

Может ли мешать то, что у меня стоит меню навигации - отображение графическое?... хотя я вснесла изменения, как оговоренно в вашем посте...

Где и что я делаю не так?

Помогите, пожалуйста

вот это вставила в шаблон overall_header

Код:

div id="twomenu">
<div class="titl_link">
<a href="#" class="upp"><img src="http://s9.tinypic.com/2dj2a2t_th.jpg" alt="Сеансы Рейки" title="Сеансы Рейки" /></a><div class="slide_link">
<a href="http://reiki-rodniksveta.forumy2x2.com/t28-topic">Диагностика,очистка, защита</a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t26-topic ">Сеансы красоты</a>
 <a href="http://reiki-rodniksveta.forumy2x2.com/t30-topic">Кристаллы</a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t31-topic">Амулеты и талисманы</a>    
</div></div>
          
<div class="titl_link">
<a href="#" class="upp"><img src="http://s9.tinypic.com/9vbous_th.jpg" alt="Обучение" title="Обучение" /></a>
<div class="slide_link">
 <a href="http://reiki-rodniksveta.forumy2x2.com/t224-topic">Базовый курс Рейки </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t238-topic">Шамбала Рейки </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t273-topic">Рейки Усуи Риохо</a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t245-topic">Кармические Рейки </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t274-topic">Каруна Рейки </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t247-topic">Рунические Рейки </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t250-topic">Кундалини Рейки </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t258-topic">Экстрасенс Рейки </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t259-topic">Элементные Рейки </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t257-topic">Деньги Рейки </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t275-topic">ДНК Рейки </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t276-topic">Энергии НВ </a>  
</div></div>
    
<div class="titl_link">
 <a href="#" class="upp"><img src="http://s9.tinypic.com/rt1dmc_th.jpg" alt="Тренинги" title="Тренинги" /></a>
<div class="slide_link">
<a href="http://reiki-rodniksveta.forumy2x2.com/t278-topic">Чтение Хроник Акаши </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t195-topic">Исцеление Рунами </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t244-topic">Комфорт в своем теле </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t279-topic">Уроки Изобилия и Удачи </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t55-topic">Путь к своему Я </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/t246-topic">Кармическое исцеление </a>    
</div></div>
    
<div class="titl_link">
<a href="#" class="upp"><img src="http://s9.tinypic.com/1jls8l_th.jpg" alt="Разделы" title="Разделы" /></a>
 <div class="slide_link">
 <a href="http://reiki-rodniksveta.forumy2x2.com/c5-category">Рейки </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/c6-category ">Хроники Акаши </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/f26-forum">Руны </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/f69-forum">Космоэнергетика </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/f12-forum">Самонастройки </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/f71-forum">Эзотерика </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/f55-forum">Разное </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/f11-forum">Библиотека </a>
<a href="http://reiki-rodniksveta.forumy2x2.com/f19-forum">Дискуссионный Клуб </a>      
</div></div>
</div>


В CSS вставила вот это

Код:

.titl_link {
display:inline-block;
position: relative;
/* для корректного отображения в старых браузерах */
display:-moz-inline-stack;
zoom:1;
*display:inline;
_overflow:hidden;
z-index: 999;
}

/* Кнопка меню */
.upp, .upp2 {
text-align:center;
margin-bottom: 10px;
margin-right: 3px;
}

/* Разворачивающаяся панель */
.slide_link {
display: none;
width: 200px;
border: 2px solid #23c720;
background-color:#fff;
position: absolute;
z-index: 999;
top: 27px;
}

/* Ссылки на разворачивающейся панели */
.slide_link a {
display: block;
background-color:#eee;
padding: 2px 5px 2px;
margin-bottom: 5px;
}

/* Ссылки на разворачивающейся панели при наведении */
.slide_link a:hover {
background-color: #23c720;
color: #fff;
}



Одним словом наваяла, но что уже сама не понимаю..(((( Помогите. Заранее спасибо

Аууууу....

В коде Вы пропустили угловую скобочку < в самом начале. Обратите внимание, что на сайте у Вас виден кусочек кода. Это из-за отсутствия скобки.

спасибо)))) это я так перенесла сюда, простите, и еще раз спасибо вам,...но.... все равно не работает, а при этом еще если смотришь в предпросмотре появилась вторая строка с этими названиями ссылок, но они не раскрываются и стоят, как второй ряд, под объявлениями. У меня такое впечатление, что чем дальше я копаю, то только окапываюсь и все без движения вперед

Вообще-то у Вас сайт висит. Это говорит о множестве ошибок. Какая у Вас версия движка?

Это после подключения персонаьных шаблонов.
Движок PunBB (punbb) .
Спасибо, Вам)))
Вообщем понятно.... отключила все персональные шаблоны... но вот что дальше делать то.. оставить затею?

Нет, если хочется это  меню, то стоит добиваться. Как альтернатива, есть такое "парящее" меню.



Надо только цвета настроить и само меню. Ставится в виджеты и CSS.

Ой, а мне нравится)))) а где можно взять настройки на него?

Скачать исходник можно, кликнув по Заархивировано в .RAR

По сути нам из HTML нужна только следующая часть кода (как пример, но требуется редактирование под себя):

Код:

<div class="topHeader">
 <a class="backArticle" href="http://pcvector.net/scripts/menu_and_navigation/336-paryaschee-navigacionnoe-menyu.html">Назад к статье >>></a>
</div>

        <ul id="nav">
            <li><a href="http://pcvector.net/">Домой</a></li>
            <li><a class="hsubs" href="#">Меню 1</a>
                <ul class="subs">
                    <li><a href="#">Подменю 1</a></li>
                    <li><a href="#">Подменю 2</a></li>
                    <li><a href="#">Подменю 3</a></li>
                    <li><a href="#">Подменю 4</a></li>
                    <li><a href="#">Подменю 5</a></li>
                </ul>
            </li>
            <li><a class="hsubs" href="#">Меню 2</a>
                <ul class="subs">
                    <li><a href="#">Подменю 2-1</a></li>
                    <li><a href="#">Подменю 2-2</a></li>
                    <li><a href="#">Подменю 2-3</a></li>
                    <li><a href="#">Подменю 2-4</a></li>
                    <li><a href="#">Подменю 2-5</a></li>
                    <li><a href="#">Подменю 2-6</a></li>
                    <li><a href="#">Подменю 2-7</a></li>
                    <li><a href="#">Подменю 2-8</a></li>
                </ul>
            </li>
            <li><a class="hsubs" href="#">Меню 3</a>
                <ul class="subs">
                    <li><a href="#">Подменю 3-1</a></li>
                    <li><a href="#">Подменю 3-2</a></li>
                    <li><a href="#">Подменю 3-3</a></li>
                    <li><a href="#">Подменю 3-4</a></li>
                    <li><a href="#">Подменю 3-5</a></li>
                </ul>
            </li>
            <li><a href="#">Меню 4</a></li>
            <li><a href="#">Меню 5</a></li>
            <li><a href="#">Меню 6</a></li>
        </ul>

Замечу, что контейнер

Код:

<div class="topHeader">
 <a class="backArticle" href="http://pcvector.net/scripts/menu_and_navigation/336-paryaschee-navigacionnoe-menyu.html">Назад к статье >>></a>
</div>

- это кнопка в правом верхнем углу скрина "Назад к статье". Возможно, он и не нужен вовсе, пока не вникал, но редактировать точно надо.

Для CSS в архиве два кода. Опять же по причине того, что не экспериментировал, не могу точно утверждать, но вроде короткий файлик так же не нужен.

Как настраивать коды.
Разархивируйте файл в удобное для Вас место. HTML-файл можно и в текстовом редакторе открыть и редактировать. Но в нем пока настраиваете часть кода, которую я привел выше. То есть, забиваете свои ссылочки и названия кнопок. Ну количество подменю можно настроить на каждой кнопке.
Ну вроде всё. Будут дополнительные вопросы, я здесь бываю часто.

Да.. можете нажать "Назад к статье" и попадете на оффсайт-разработчик кода. Но не рекомендую пробовать всё, что там найдете - не всё подходит к нашим форумам.

Да.. там громоздкая таблица. Её можно вставить так же виджет ниже HTML-кода, заключив между тегами <style type="text/css"> </style>

rodniksveta пишет:но вот что дальше  делать то.. оставить затею?

Станьте программистом.
УПД: Ну или хотя бы верстальщиком.

Александр, спасибо Вам еще раз  попробую разобраться

Самое сложное - это цвета подогнать. Там их много - как-никак градиент.

ги-ги.... эть кажеться, что только это сложно))) мне, человеку далекому от программирования все не очень просто))) я не волшебник, но учусь))) Еще раз вам спасибо)))

Что не получается-то?

пока подстраиваю под себя.... как только сделаю и попробую отпишусь)))) Еще раз спасибо

Александр, еще раз большое спасибо за помощь)))
Итак, кое что получилось))) и кое что нет((((
Подставила ссылки, переименовала кнопки, внесла изменения в коды, создала виджет. Проверила ссылки  - рабочие, но теперь вот проблема: как и куда его поставить?
Вопрос в том, что мне его нужно его поставить  -  на главной странице под строкой с объявлениями на всю строку, а  на всех других страницах - под строкой панели навигации - начало на уровне первой строкипервой строки левого виджета.
Пока что  я его поставила  в левую колонку на главной странице и он получается, что находится как и все виджеты  на белом фоне, а не прозрачном и  как все остальные виджеты этой колонки имеет тот же размер, а  поэтому практически не виден. Как мне это изменить на то, что я описала выше?  
Заранее спасибо за ответ

Ну можно поднять виджеты над форумом, но это не вариант..
Пробуйте добавить код в таблицу CSS

Код:

#userPulsMenu {
    -webkit-box-shadow: 0 0 10px #000;
    -moz-box-shadow: 0 0 10px #000;
    box-shadow: 0 0 10px #000;
    border: 1px solid #000;
    
    position: absolute;
    left: 680px;
    right: 0px;
    top: 45px;
    bottom: 0px;
    
    width: 200px;
    height: 175px;  
}        

Сам HTML-код заключите в теги контейнера <div id="userPulsMenu"> </div>

left: 680px; - выставьте нужный параметр. Это отступ слева.
top: 45px; - отступ сверху.

 width: 200px;
   height: 175px;   - это размер, ставьте без него пока. Если надо будет задать размеры, вставьте с нужными параметрами. Но думаю, не пригодится.
Если нужно, чтобы меню при прокрутке оставалось в заданном месте экрана, поставьте position: fixed;

нашла пример того как хочу чтобы была панель меню здесь

Ну это упрощенная версия "парящего" меню.

согласна, вы мне нашли круче)))) я имею ввиду расположение

я имею ввиду такое расположение, а меню у меня круче))))

Ну ставьте код, что я написал и получится. Там Вы не доиграли с градиентом, но и так неплохо смотрится.

И ещё.. ставьте в правую колонку виджетов это меню. Вроде она у Вас замаскирована в CSS.