초보 ] 메뉴바 제이쿼리 코드 질문

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<div class="topMenu">
<ul class="menu01">
<li><span>1번 큰메뉴</span>
<ul class="dept01">
<li id="nop">1번작은메뉴</li>
<li id="nop">1번작은메뉴</li>
<li id="nop">1번작은메뉴</li>
</ul>
</li>
<li><span>2번 큰메뉴</span>
<ul class="dept01">
<li id="nop">2번작은메뉴</li>
<li id="nop">2번작은메뉴</li>
<li id="nop">2번작은메뉴</li>
</ul>
</li>
<li><span>3번 큰메뉴</span>
<ul class="dept01">
<li id="nop">3번작은메뉴</li>
<li id="nop">3번작은메뉴</li>
<li id="nop">3번작은메뉴</li>
</ul>
</li>
<li><span>4번 큰메뉴</span>
<ul class="dept01">
<li id="nop">4번작은메뉴</li>
<li id="nop">4번작은메뉴</li>
<li id="nop">4번작은메뉴</li>
</ul>
</li>
<li><span>5번 큰메뉴</span>
<ul class="dept01">
<li id="nop">5번작은메뉴</li>
<li id="nop">5번작은메뉴</li>
<li id="nop">5번작은메뉴</li>
</ul>
</li>
</ul>
</div>
<div class="none"></div>
</div>

.lo_me{max-width: 1200px; margin: 0 auto; padding: 25px;}
.m_logo .main_logo {float: left;}
 
.topMenu{position: relative; text-align: center; float: right; width: 70%;}
.topMenu::after{content: ""; display: block; clear: both;}
.menu01 > li{float:left; width: 20%; line-height: 40px;}
.menu01 span{font-size: 0.95em;}
.dept01{position: absolute;display: none; width: 20%; border-bottom: 1px solid #000; background: rgba(27, 27, 27, 0.6); border-right: 1px dotted #fff;}
#nop{float: none; padding: 10px 10px;}
.none::after{content: ""; display: block; clear: both;}

$(document).on('mouseover', '.topMenu span', function() {
$('.dept01').slideDown(300);
});
$(document).on('mouseover', 'div', function () {
if (!$(this).hasClass('topMenu')) {
$('.dept01').slideUp(300);
}
});