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

[Vladya]

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

<div class="mcont">
<a href="http://kriski-shkola.at.ua/">Головна</a>  
<a href="/forum/">Форум</a>  
<a href="/index/vchiteli_kriskivskoji_zosh/0-5">Вчителі школи</a>  
<a href="/index/struktura_navchalnogo_roku/0-18">Структура навчального року</a> 
<a href="/photo">Фотоальбоми</a> 
<a href="/video">Відеорепортажі</a> 
<a href="/load">Каталог файлів</a> 
<a href="/gb">Книга відгуків</a> 
<a href="/index/zv_39_jazok_z_administracieju/0-6">Зворотній зв'язок</a> 
</div>

но это обычная менюшка, к ней добавляю следующее:

<li><a class="hide" href="http://kriski-shkola.at.ua/">Головна</a>
<ul>
<li><a href="#">Подпункт меню</a></li>
<li><a href="#">Подпункт меню</a></li>
<li><a href="#">Подпункт меню</a></li>
</ul>
</li>

но так не работает потому что не описан класс "Hide", вопрос: что туда написать, что бы оно заработало? или я вообще не в том направлении иду?
Спасибо за ответ!

[Vladya]

Подскажите что надо прописать в этом коде, что бы меню появлялось слева а не справа?

.mcont ul { 
margin:0px;
padding:0px;
list-style:none;
width:250px;
}

.mcont ul li {
position: relative;
}

.mcont li ul {
position:left; 
left:250px;
top:0;
display:none;
}

.mcont ul li a {
display:block;
padding:8px 0;
padding-top:5px;
padding-left:35px;
color:#666;
background:#f1f1f1 url(../img/mfon.png) repeat-y;
}

.mcont li:hover ul {
display: block;
padding-left: 10px; 
}

[sasha32]

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

разметка

<ul class="mcont">
   <li><a href="#">1</a>
    <ul>
     <li><a href="#">1.1</a></li>
     <li><a href="#">1.2</a></li>
    </ul>
   </li>
   <li><a href="#">2</a>
    <ul>
     <li><a href="#">2.1</a></li>
     <li><a href="#">2.2</a></li>
    </ul>
   </li> 
   <li><a href="#" class="nema">3</a></li>
</ul>

стиль

.mcont, .mcont UL {
    position: relative; /*  Позиционируются относительно */
    width: 250px; /* Ширина меню */
    margin: 0; padding: 0; /* Отключаем отступы и поля */
    border-bottom: 1px solid #CCC; /* Линия снизу */
    left: 250px; /* Место расположение на странице */
   }
.mcont LI {
    list-style: none; /* Убираем маркеры */
    position: relative; /* Подпункты позиционируются относительно */
    border: 1px solid #CCC; /* Рамка вокруг пунктов меню */
    border-bottom: none; /* Границу снизу не проводим */
    background-color:#f9f9f9; /* Цвет фона неактивного пункта, 
    можно вставить рисунок 'background:#f9f9f9 url(../img/mfon_1.png)  
    repeat-y' */ 
   }
.mcont UL {
    position: absolute; /* Подменю позиционируются абсолютно */
    display: none; /* Скрываем подменю */
    top: -1px; /* Сдвигаем вверх на толщину линии */
    left: -250px; /* Сдвигаем подменю влево, 
    если убрать минус, сдвинится вправо */
   }
.mcont A {
    display: block; /* Ссылка как блочный элемент */
    padding: 5px 10px; /* Поля вокруг надписи */
    text-decoration: none; /* Убираем подчеркивание у ссылок */
    background: url(../img/strelka.png) 1% 50% no-repeat;  /* Отображаем  
    рисунок стрелки,
	если поставить 80% в место 1%, стрелка будет справа */
               
    color: #666; /* Цвет текста */ 
   }
.mcont UL A {
    background-image: none; /* Для подпунктов рисунок убираем */
   }
.mcont LI:hover {
    background-color: #f0f0f0; /* Цвет фона активного пункта,
	можно вставить рисунок 'background:#f0f0f0 url(../img/mfon_2.png) repeat-y' */
   }
.mcont LI:hover UL {
    display: block; /* При выделении пункта отображается подменю */
   }
.mcont .nema { 
    background-image: none; /* Прячем рисунок */
   }

Думаю в комментариях всё понятно, стрелку прикрепил .
А раздвигающееся меню можно сделать с CSS3,
эффект не хуже чем с JavaScript.

[Vladya]

Сообщение от sasha32

А раздвигающееся меню можно сделать с CSS3,
эффект не хуже чем с JavaScript.

честно говоря, тот код что во втором посте и работает как выпадающее меню, все что я сделал это добавил пару пунктов, а за комментарии спасибо большое!!!!