drop down menu trouble - php

Question

this is my menu code in html which works fine, all classes and database references works fine only sliding down does not work
<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>
<?php echo $pat['title'] ?>
</li>
<!-- KRAJ IF USLOVA -->
<?php endif; ?>
<?php endforeach; ?>
</ul>
</li>
<?php endforeach; ?>
</nav>
<!-- END OF NAV -->
sliding down does not work and there is no error report
heres my js code
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'));
});
and here is 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

This line is useless :
document.find('ul').style.display = 'block';
in :
meni.on('mouseenter', 'li', function(){
document.find('ul').style.display = 'block';
($(this).find('ul').stop().slideDown('fast'));
})
Try to comment It, this should work.
And for esthetic matter:
nav ul.top_nav_lv2{
top:80px;
}