Помогите с кнопками меню, чтобы они раскрывались в доп.меню

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

Попробовала сделать кнопки дополнительного меню. Две текстовых получились, а вот кнопка "Новости" не раскрывает подменю. Всё проверила.

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

Спасибо! По первой кнопке "Download" брала Здесь
В хтмл вставила не всё - так мне нужна одна кнопка, а там было несколько - может тут и ошиблась?

Код:

<ul id="menu_p">
<ul>
<li><a href="http://contacts.rambler.ru">Контакт</a></li>
<li><a href="http://nichrome.rambler.ru">nichrome</a></li>
<li><a href="http://icq.rambler.ru">АськаICQ</a></li>
<li><a href="http://firefox.rambler.ru">firefox</a></li>
</ul>

а в css вторую большую таблицу.Всё сохранила.
По кнопке №2 (Новости) - создала новую страницу скрипта и туда поставила вот этот

Код:

jQuery(document).ready(function(){

jQuery("a.upp").click(function(){
jQuery(this).parent().children('.slide_link').slideToggle(150);
return false
});

});

а в 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 #006699;
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: #006699;
color: #fff;
}

Которые у меня получились текстом "Голосуем" и "My Lands" я тоже хочу в кнопки превратить, но пока не добью хотя бы одну, то пусть будет так. И немного непонятно как кнопку поставить вместо ссылки "My Lands"
В шаблон overall_header поставила после этого
<div id="page-body">
Вот это

<div id="twomenu">

<div class="titl_link">
<a href="#" class="upp"><img src="http://img-fotki.yandex.ru/get/6214/33959814.9/0_764ab_30e224f8_M.jpg" alt="Новости" title="Новости" /></a>
<div class="slide_link">
<a href="Моя ссылка">Все соцсети</a>
<a href="Моя ссылка">Твиттер</a>
<a href="Моя ссылка">В долларах</a>
</div></div>

<div class="titl_link">
<a href="http://mlgame.ru/?bonus=2265118" class="upp2">Играть My Lands</a>
</div></div>

<div class="titl_link">
<a href="http://wp.me/p1sdXV-2I" class="upp2">Голосуем</a>
</div></div>

</div>

Дана мне кто-нибудь поможет?

То есть у Вас код и скрипт от одного варианта меню, а CSS - от другой.
Удаляйте все. Проще переделать, чем исправлять.

Итак, у Вас должны быть кнопки:

"Download"
которая разворачивает блок
<a href="http://contacts.rambler.ru">Контакт</a>
<a href="http://nichrome.rambler.ru">nichrome</a>
<a href="http://icq.rambler.ru">АськаICQ</a>
<a href="http://firefox.rambler.ru">firefox</a>

"Новости"
которая разворачивает блок
<a href="Моя ссылка">Все соцсети</a>
<a href="Моя ссылка">Твиттер</a>
<a href="Моя ссылка">В долларах</a>

Так?

Кнопки
"Играть My Lands"
"Голосуем"
ничего разворачивать не должны?
Тогда добавляйте их через ПА: https://help.forum2x2.ru/t11217-topic#100775

Спасибо! Да это должно быть так:
"Download"
которая разворачивает блок

Код:

<a href="http://contacts.rambler.ru">Контакт</a>
<a href="http://nichrome.rambler.ru">nichrome</a>
<a href="http://icq.rambler.ru">АськаICQ</a>
<a href="http://firefox.rambler.ru">firefox</a>

"Новости"
которая разворачивает блок

Код:

<a href="Моя ссылка">Все соцсети</a>
<a href="Моя ссылка">Твиттер</a>
<a href="Моя ссылка">В долларах</a>


А про кнопки "Играть My Lands" "Голосуем" я поняла и добавлю, как вы посоветовали через ПА. Вы мне датите готовы код на первые две кнопки?

1. В шаблон overall_header (Верхняя часть страницы) после {GENERATED_NAV_BAR} ставите код:

Код:

<ul id="menu_p">
  <li>
      <a href="#">Download</a>
      <ul>
        <li><a href="http://contacts.rambler.ru">Контакт</a></li>
        <li><a href="http://nichrome.rambler.ru">nichrome</a></li>
        <li><a href="http://icq.rambler.ru">АськаICQ</a></li>
        <li><a href="http://firefox.rambler.ru">firefox</a></li>
      </ul>
  </li>
  <li>
      <a href="#">Новости</a>
      <ul>
        <li><a href="Моя ссылка">Все соцсети</a></li>
        <li><a href="Моя ссылка">Твиттер</a></li>
        <li><a href="Моя ссылка">В долларах</a></li>
      </ul>
  </li>
</ul>

Сохраняете, публикуете (нажав на ).

2. В CSS добавляете:

Код:

#menu_p, #menu_p ul {
        margin: 0;
        padding: 0;
        list-style: none;
}
#menu_p {
        width: 100%;
        margin: 2px auto;
        border: 2px solid #DEE3E7;
        background: #111 url(http://hitskin.com/themes/12/59/78/i_back_title.png) repeat-x top center;
        height: 30px;
}
#menu_p:before, #menu_p:after {
        content: "";
        display: table;
}
#menu_p:after {
        clear: both;
}
#menu_p {
        zoom:1;
}
 
#menu_p li {
        float: left;
        -moz-box-shadow: 1px 0 0 #444;
        -webkit-box-shadow: 1px 0 0 #444;
        box-shadow: 1px 0 0 #444;
        position: relative;
        height: 30px;
        line-height: 30px;
}
 
#menu_p a {
        float: left;
        padding: 0 30px;
        color: #fff;
        text-transform: uppercase;
        font: bold 12px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #556B2F;
        outline: none;
        height: 30px;
        line-height: 30px;
}
 
#menu_p li:hover > a {
        color: #666;
        text-shadow: none;
}
 
*html #menu_p li a:hover {
        color: #666;
}
 
#menu_p ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 28px;
        left: 0;
        z-index: 999;
        background-color: #688F06;
        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        -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*/
        border-bottom: 1px dashed #ddd;
}

#menu_p ul li:last-child {
        border-bottom: 1px solid #444;
}
 
#menu_p ul a {
        width: 130px;
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
        outline: none;
        height: 30px;
        line-height: 30px;
}
 
#menu_p ul a:hover {
        background-color: #95C51B;
        border: none;
}

Сохраняете.


А старые настройки CSS для предыдущего меню —

Код:

#menu_p {
        width: 960px;
        margin: 2px auto;
        border: 1px solid #222;
        background-color: #111;
}
#menu_p:before, #menu_p:after {
        content: "";
        display: table;
}
#menu_p:after {
        clear: both;
}
#menu_p {
        zoom:1;
}
 
#menu_p li {
        float: left;
        border-right: 1px solid #222;
        -moz-box-shadow: 1px 0 0 #444;
        -webkit-box-shadow: 1px 0 0 #444;
        box-shadow: 1px 0 0 #444;
        position: relative;
}
 
#menu_p a {
        float: left;
        padding: 12px 30px;
        color: #999;
        text-transform: uppercase;
        font: bold 12px Arial, Helvetica;
        text-decoration: none;
        text-shadow: 0 1px 0 #000;
        outline: none;
}
 
#menu_p li:hover > a {
        color: #00CED1;
}
 
*html #menu_p li a:hover {
        color: #00CED1;
}
 
#menu_p ul {
        margin: 20px 0 0 0;
        _margin: 0; /*IE6 only*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        top: 38px;
        left: 0;
        z-index: 999;
        background: #444;
        -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
        -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        box-shadow: 0 -1px 0 rgba(255,255,255,.3);
        -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*/
        -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
        box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
 
#menu_p ul li {
        float: none;
        display: block;
        border: 0;
        _line-height: 0; /*IE6 only*/
        -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
        box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
 
#menu_p ul li:last-child {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
}
 
#menu_p ul a {
        padding: 10px;
        width: 130px;
        _height: 10px; /*IE6 only*/
        display: block;
        white-space: nowrap;
        float: none;
        text-transform: none;
        outline: none;
}
 
#menu_p ul a:hover {
        background-color: #111;
}


обязательно удалите!

Если все сделано правильно, появится меню:

Спасибо, Даночка! У меня всё получилось)) Всё работать начало, когда я даже ещё в CSS не добавляла - там правда панелька только чёрная была. А когда добавила, то стала по цвету форума) Вы умничка! Сейчас ещё с кнопками теми двумя разберусь. Если не трудно ещё тут же напишите правильные последовательные действия для отдельной кнопки к главному меню (а то рыть форум опять не хочется)

Код:

http://mlgame.ru/?bonus=2265118">Играть My Lands</a>

И ещё Дана: можно как-то сделать, чтобы подпункты в раскрывающемся меню открывались не на этой странице форума, а открывали новую?

Замени код этот

Код:

<a href="http://contacts.rambler.ru">Контакт</a>

на этот

Код:

<a href="АДРЕС СТРАНИЦЫ" target="_blank">текст</a>

и тогда будет открыватсся в другом окне.

Дана скажите пожалуйста, а как добавить дополнительные кнопки к этому меню, например после слово НОВОСТИ я немогу добавить ещё пару кнопок. Подскажите пожалуйста как это сделать, а то у меня что то не получилось.

Спасибо! у меня получилось)