Выпадающее меню для главной категории, вопрос по стилям [РЕШЕНО]

[SergeyV]

Добрый день! Подскажите пожалуйста, что еще нужно в стилях прописать, что бы при наведении курсора на категорию, подкатегория раскрывалась?!

Все что мне удалось, это сделать так что бы при наведении на категорию (зона 1) под категория раскрывалась (зона 2) но как только я опускаю мышь ниже на открывшуюся категорию, она сразу прячется обратно... :(

Прилагаю весь код который отвечает за меню в стилях... Подскажите пожалуйста что нужно сделать, что бы подкатегория не пряталась обратно...

.box-category {
margin-top: -5px;
}
.box-category ul {
list-style: none;
margin: 0;
padding: 0;
}
.box-category > ul > li {
padding: 8px 8px 8px 0px;
background: #FFFFC6   /* url('../image/cat1.png') no-repeat 0% 12px; */
/* -webkit-transition: background-color 0.5s ease-out; */
/* -moz-transition: background-color 0.5s ease-out; */
/* -ms-transition: background-color 0.5s ease-out; */
/* -o-transition: background-color 0.5s ease-out; */
/* transition: background-color 0.5s ease-out; */
}
.box-category > ul > li:hover {
background:#FADF71;
}
.box-category > ul > li + li {
border-top: 1px dashed #CCC;
}
.box-category > ul > li > a {
text-decoration: none;
color: #333;
padding-left:15px;
display:block;
}
.box-category > ul > li > a:hover {
text-decoration: none;
/* color:#8B0000; */
}
.box-category > ul > li ul {
display: none;
}
.box-category > ul > li a.active {
font-weight: bold;
}
.box-category > ul > li a:hover + ul { /* ЭТО ВСЕ ЧТО Я СМОГ СДЕЛАТЬ */
display: block;
}
.box-category > ul > li a.active + ul {
display: block;
}
.box-category > ul > li ul > li {
padding: 5px 5px 0px 10px;
}
.box-category > ul > li ul > li > a {
text-decoration: none;
display: block;

/* -webkit-transition: all 0.5s ease-out; */
/* -moz-transition: all 0.5s ease-out; */
/* -ms-transition: all 0.5s ease-out; */
/* -o-transition: all 0.5s ease-out; */
/* transition: all 0.5s ease-out; */
}
.box-category > ul > li ul > li > a:hover {
   /* padding-left:10px; */
   text-decoration: underline;
}
.box-category > ul > li ul > li > a.active {
font-weight: bold;
}

[afwollis]

а вы смотрели, как организовано верхнее меню категорий в 15x ?

[SiZE]

Подскажите пожалуйста что нужно сделать, что бы подкатегория не пряталась обратно...

Через js надо установить класс, который будет содержать свойства не позволяющие ей спрятаться.

[SergeyV]

а вы смотрели, как организовано верхнее меню категорий в 15x ?

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

Через js надо установить класс, который будет содержать свойства не позволяющие ей спрятаться.

И как это можно сделать? Скажите пожалуйста подробнее я в js полный ноль.

Я решил сделать такое меню после того как прочитал эту статью, http://htmlbook.ru/css/hover

и тут ни о каком js даже упоминания нет.

[sitecreator]

а вы смотрели, как организовано верхнее меню категорий в 15x ?

верно, верно. и стили можете оттуда же взять

[SiZE]

Я решил сделать такое меню после того как прочитал эту статью, http://htmlbook.ru/css/hover

и тут ни о каком js даже упоминания нет.

Короче ставь jquery =) Пиши после вывода меню:

<script type="text/javascript">
$('.box-category > ul > li a').hover(function(){
$(this).addClass('active');
})
</script>

доработаешь сам ;)