Проблема с меню

[inex]

Добрый день вот мое меню

        <nav id="topmenu">
            <ul>
                <li><a class="menu-link">Главная</a></li>
                <li><a class="menu-link">Новости</a>
                    <ul class="drop-bottom">
                        <li><a>Спорт</a></li>
                        <li><a>Бизнес</a></li>
                        <li><a>Город</a></li>
                    </ul>
                </li>
                <li><a class="menu-link">Статьи</a>
                    <ul class="drop-bottom">
                        <li><a>Спорт</a></li>
                        <li><a>Бизнес</a></li>
                        <li><a>Природа</a></li>
                        <li><a>Достижения</a></li>
                        <li><a>Город</a></li>
                    </ul>
                </li>
                <li><a class="menu-link">О нас</a></li>
                <li><a class="menu-link">Связь</a></li>
            </ul>
        </nav>

$(document).ready(function() {
    $('#topmenu ul li').hover(
        function(){
            $(this).find('.drop-bottom').appendTo('#topmenu').fadeIn();
        },function(){
            $(this).find('.drop-bottom').fadeOut();
        }
    );
});

Ховер срабатывает только при наведении, когда убираешь курсор то .drop-bottom не исчезает...что делаю не так?

[Быколай]

Зачем тут appendTo()?

С минимальной стилизацией и модификацией существующего решения я могу предложить такой код.

[s0rr0w]

Добрый день вот мое меню

$(document).ready(function() {

$('#topmenu ul li').hover(

function(){

$(this).find('.drop-bottom').appendTo('#topmenu').fadeIn();

},function(){

$(this).find('.drop-bottom').fadeOut();

}

);

});

Ховер срабатывает только при наведении, когда убираешь курсор то .drop-bottom не исчезает...что делаю не так?

$(this).find('.drop-bottom').appendTo('#topmenu').fadeIn();

$('#topmenu ul li').hover

[inex]

Зачем тут appendTo()?

С минимальной стилизацией и модификацией существующего решения я могу предложить такой код.

изначально так и делал, но у меня почему-то подменю не с начала второй строки появляется, а под тем элементом на который наводишь...поэтому начал прикручивать appendTo

Edited November 7, 2012 by inex

[Быколай]

appendTo — перелопачивает DOM, который трогать не зачем, т.к. он у вас весь есть. Вот если бы вы ajax-ом получали доп. разметку или генерили как-то, тогда да, функции для работы с DOM пригодились бы.

А раз вся разметка уже известна сразу, то достаточно средств CSS — показать/спрятать.

Да там и js в принципе не нужен, такие меню можно на CSS делать http://jsfiddle.net/zt3QY/1/

Edited November 7, 2012 by Быколай

[inex]

Ну с эффектами то симпотишнее) Спасибо!

Блин, теперь новая непонятка, вот

http://jsfiddle.net/kamaz6141/zt3QY/2/

расстояния между блоками, а если добавить float:left для li, то вот что выходит

http://jsfiddle.net/kamaz6141/zt3QY/3/

Edited November 7, 2012 by inex

[inex]

Как можно обойтись без display:inline? Запарился уже с этим меню...

Если использовать display:block то подменю появляется слева, а не под элементом на который навел(как мне и нужно)... С inline нормально не застилизовать

http://jsfiddle.net/zt3QY/

Edited November 7, 2012 by inex