Question

这是我在html中的菜单代码，工作正常，所有类和数据库引用工作正常，只有向下滑动不起作用

    <script src="<?php echo JS ?>main.js"></script>
<nav id="top_nav" class=" clearfix">
<ul class="container clearfix">
    <?php
        foreach ($meni as $kat): ?>

        <li role="">
            <a href="<?php echo base_url()?> ">
                <?php echo $kat['title']; ?>
            </a>
            <ul class="top_nav_lv2 clearfix">
                <?php foreach ($pod_meni as $pat) : ?>
                <?php if($pat['meni_id'] == $kat['id_meni']): ?>
                        <li>
                            <a href="<?php echo base_url() ?>"><?php echo $pat['title'] ?></a>
                         </li>
                 <!-- KRAJ IF USLOVA  -->
                <?php endif; ?>
                <?php endforeach; ?>
            </ul>
        </li>
    <?php  endforeach; ?>

</nav>
<!-- END OF NAV -->

向下滑动不起作用且没有错误报告

继承人我的js代码

var meni = $('#top_nav');
meni.on('mouseenter', 'li', function(){
     document.find('ul').style.display = 'block';
    ($(this).find('ul').stop().slideDown('fast'));
})
.on('mouseleave', 'li', function(){
    ($(this).find('ul').stop().slideUp('fast'));
});

这里是css

#top_nav{float: right;width: 61%}
nav ul {margin-top: 0}
nav ul li {float: left;display: inline-block;padding: 39px 20px 40px 20px;border-right: 1px solid transparent;position: relative;}
nav ul li:hover{background: url(../../img/resursi/meni_hover.png);border-right: 1px solid white;-moz-box-shadow: inset 6px 0 7px -7px #000;-webkit-box-shadow: inset 6px 0 7px -7px #000;box-shadow: inset 6px 0 7px -7px #000;}
.current {background: url(../../img/resursi/meni_hover.png);border-right: 1px solid white;-moz-box-shadow: inset 6px 0 7px -7px #000;-webkit-box-shadow: inset 6px 0 7px -7px #000;box-shadow: inset 6px 0 7px -7px #000;}
nav ul li a {color:#666666 ;text-decoration: none;font-family: georgia;}
nav ul li a:hover { color:#d10000 ;}

nav ul.top_nav_lv2 {clear: both; margin: 0; padding: 0px 0 0 0 ; display: none; background: red;position: absolute;left: 0; top:0px;  z-index: 100;}
nav ul.top_nav_lv2 li {display: block; margin:0 0px 0 0px; padding: 0px 0 0px 10px;font-size: 14px;width: 140px; z-index: 1000;border-bottom: 2px solid transparent;}
nav ul.top_nav_lv2 li:hover {border-bottom: 2px solid transparent;background: rgba(255,255,255,0.07);}
nav ul.top_nav_lv2 li a {float: left; width: 120px; border-bottom: 2px solid transparent;padding: 8px 0 8px 10px;}
nav ul.top_nav_lv2 li a:hover {border-bottom: 2px solid rgba(255,255,255,0.6);}

Answer 1

这条线没用：

document.find('ul').style.display = 'block';

in：

meni.on('mouseenter', 'li', function(){
     document.find('ul').style.display = 'block';
    ($(this).find('ul').stop().slideDown('fast'));
})

尝试评论它，这应该有效。

对于美学问题：

nav ul.top_nav_lv2{
top:80px;
}

下拉菜单麻烦

1 个答案: