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

[lepota 3]

Подскажите пожалуйста. Есть горизонтальное меню 

Цитата

 

<li><a class="menu-link" href="/">Главная</a><img src="{THEME}/images/menu.png" alt="" />

 <li><a class="menu-link" href="/">Вторая</a><img src="{THEME}/images/menu.png" alt="" />

 

есть стили меню и выпадающего меню

Цитата

 

/*Меню - футер*/
.footer{border-bottom:2px solid #BDBCB8;}
ul#footer-m {list-style-type:none; margin:0; padding:0px 0px 0px 20px;}
ul#footer-m li a{ display:block; line-height:15px; text-decoration:none; color:#434343;}
ul#footer-m li a:hover{ color:#91606E; text-decoration:underline;}
.f-m{ float:left; width:140px;}
.foot {color:#999;padding:10px;}
.foot a {color:#999;font-weight: bold;}
.foot a:hover {color:#91606E;}

/*Выпадающее меню*/
.menu{height: 45px;position: relative;z-index: 1000;width:1024px;float: left;}
.menu-link{display: block;height: 35px;font: bold 11px Tahoma;color: #fff;line-height: 35px;padding: 0 10px;float: left; text-transform:uppercase; text-decoration:none;}
.menu ul{margin: 0;padding: 0;}
.menu-link:hover{color: #fff;}
.activ{color: #dddddd;}
.menu li{list-style-type: none;float: left;position: relative;height: 40px;z-index: 1000;color: #999999;line-height: 35px;}
.hidden-menu{display: none;background: url(../images/bg-hidden-menu.jpg) 0 0 repeat;position: absolute;top: 35px;left: 0px;width: 140px;z-index: 100;padding: 10px 0 20px 18px;border-radius: 0 0 5px 5px;-mos-border-radius: 0 0 5px 5px;-webkit-border-radius: 0 0 5px 5px;}
.menu-h{display: block;width: 120px;height: 30px;font: bold 12px Tahoma;color: #fff;line-height: 30px;padding: 0 0 0 3px;background: url(../images/hidden-line.png) 0 bottom repeat-x; text-decoration:none;}
.menu-h:hover{color:#dcdcdc; text-decoration:underline;}

 

прописал вот так: 

Цитата

 

<div class="menu">
        <ul>
            <li><a class="menu-link" href="/">Главная</a><img src="{THEME}/images/menu.png" alt="" />
            <ul>
                 <li><a href="#">ссылка 1</a></li>
                  <li><a href="#">ссылка 2</a></li>
            </ul>
             </li>

</div>

 

Чего то не пашет. Подскажите как прописать правильно что бы выпадающее было....

Изменено 28 ноября 2017 пользователем lepota

[master27 38]

54 минуты назад, lepota сказал:

Чего то не пашет.

есть подозрение, что ещё и скрипты должны быть.

[lepota 3]

скрипт вот этот

Цитата

 

$(document).ready(function() {
    $('.menu li').hover(
        function() {
        $(this).find('.hidden-menu').css({'display':'block'});
        $(this).find('.menu-link').addClass('activ');
    }, function() {
        $(this).find('.hidden-menu').css({'display':'none'});
        $(this).find('.menu-link').removeClass('activ');
    });
    
    /*********************************************/
    var sliderTime = 8000;
    
    $('.slaider-block-all:first').addClass('slaider-activ').find('.slaider-block-news').fadeIn();
    
    function showSliderItem() {
        clearTimeout(timerId);
        var currentBlock = $('.slaider-activ');
        var nextBlock = currentBlock.next('.slaider-block-all').length ? currentBlock.next('.slaider-block-all') : $('.slaider-block-all:first');
    
        currentBlock.find('.slaider-block-news').fadeOut();
        $('.slaider-block-all').removeClass('slaider-activ');
        nextBlock.addClass('slaider-activ').find('.slaider-block-news').fadeIn();
        
        nextBlock.addClass('slaider-activ').fadeIn(800, function () {
            timerId = setTimeout(showSliderItem, sliderTime);
            });
            return false;
            
    }
    
    function showCurrent() {
        clearTimeout(timerId);
        $('.slaider-block-all').removeClass('slaider-activ');
        $('.slaider-block-news').fadeOut();
        
        $(this).parent().addClass('slaider-activ').find('.slaider-block-news').fadeIn();
        
        timerId = setTimeout(showSliderItem, sliderTime);
    }
    
    $('.slaider-block-news-mini').click(showCurrent);
    
    timerId = setTimeout(showSliderItem, sliderTime);
    
    
});

$(function() {

    $( "#logindialog" ).dialog({
        autoOpen: false,
        show: 'fade',
        hide: 'fade',
        width: 300
    });

    $('#loginlink').click(function(){
        $('#logindialog').dialog('open');
        return false;
    });
});

 

 

[master27 38]

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

    $('.menu li').hover(
        function() {
        $(this).find('.hidden-menu').css({'display':'block'});
        $(this).find('.menu-link').addClass('activ');
    }, function() {
        $(this).find('.hidden-menu').css({'display':'none'});
        $(this).find('.menu-link').removeClass('activ');
    });

 

[lepota 3]

а зачем там скрипт? ведь можно без всяких скриптов сделать. Так и не разобрался "как все таки она вертится?"

[germanydletest 455]

https://habrahabr.ru/company/mr_gefest/blog/273907/

https://ruseller.com/lessons.php?rub=2&id=1442
 

выбирай, не хочу 

[lepota 3]

таких менюшек дополна, но со стилями и как вписать, это проблема.