выпадающих проблемы меню

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 --> 

сползать вниз не работает, и нет никаких сообщений об ошибке

Heres мой 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'; 

в:

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

пытаться комментировать его, это должно работать.

И эстетическая материя:

nav ul.top_nav_lv2{ 
top:80px; 
}