Раскрывающееся меню

Рейтинг: 0Ответов: 1Опубликовано: 20.03.2015
#menu-levoe-menyu a:hover ~ ul li {
    margin-top:0;
    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}

И html:

alt text

При наведении на "Монтаж потолков" происходит раскрытие .submenu.

Нужно сделать, чтобы при наведении на .submenu меню не сворачивалось, кто может помочь?

css html
Источник: Stack Overflow на русском

Ответы

▲ 1

Зачем нужны готовые тяжелые решения, когда достаточно несколько строчек jQuery http://jsfiddle.net/9yznus72/3/

<ul class="menu">
    <li><a href="#">Раздел1</a>
     <ul>
            <li><a href="#">Подраздел1</a></li>
            <li><a href="#">Подраздел2</a></li>
            <li><a href="#">Подраздел3</a></li>
        </ul>
     </li>
    <li><a href="#">Раздел2</a>
        <ul>
            <li><a href="#">Подраздел1</a></li>
            <li><a href="#">Подраздел2</a></li>
            <li><a href="#">Подраздел3</a></li>
        </ul>
    </li>
    <li><a href="#">Разде3</a>
        <ul>
            <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>
            <li><a href="#">Подраздел6</a></li>
            <li><a href="#">Подраздел7</a></li>
        </ul>
    </li>       
</ul>

/*Обнуляем отступы*/
ul, li {
    margin:0;
    padding:0;
    list-style-type:none;   
}

/*Задаём параметры блока, содержащего основное меню*/
.menu {
    display:block;
    position:relative;
    top:50px;
    left:50px;         
}

/*Задаём стили для разделов нашего меню*/
.menu > li {
    display:block;
    position:relative;
}

/*Стили для скрытого выпадающего меню*/
.menu > li > ul {
    position:relative;
    display:none;   
}

jQuery(document).ready(function ($) {
    var parentLi = $('.menu > li'), insertUl = $('.menu > li > ul');
    parentLi.click(function() {
    $(this).find(insertUl).slideToggle();
    });
    });