[HTML]Full Menu menu

Navigation 에서 full로 dropdown 로 하는 방법

 

- HTML

<div class="logo">
    <span class="logo">full dropdown navigation(menu)</span>
</div>
<div class="topMenu">
    <ul class="menu01">
        <li><span>Menu01</span>
            <ul class="dept01">
                <li><a href="#a">sub01</a></li>
                <li><a href="#a">sub02</a></li>
                <li><a href="#a">sub03</a></li>
                <li><a href="#a">sub04</a></li>
                <li><a href="#a">sub05</a></li>
            </ul>
        </li>
        <li><span>Menu02</span>
            <ul class="dept01">
                <li><a href="#a">sub01</a></li>
                <li><a href="#a">sub02</a></li>
                <li><a href="#a">sub03</a></li>
                <li><a href="#a">sub04</a></li>
                <li><a href="#a">sub05</a></li>
            </ul>
        </li>
        <li><span>Menu03</span>
            <ul class="dept01">
                <li>sub01</a></li>
                <li>sub02</a></li>
                <li>sub03</a></li>
                <li>sub04</a></li>
                <li>sub05</a></li>
            </ul>
        </li>
        <li><span>Menu04</span>
            <ul class="dept01">
                <li><a href="#a">sub01</a></li>
                <li><a href="#a">sub02</a></li>
                <li><a href="#a">sub03</a></li>
                <li><a href="#a">sub04</a></li>
                <li><a href="#a">sub05</a></li>
            </ul>
        </li>
        <li><span>Menu05</span>
            <ul class="dept01">
                <li><a href="#a">sub01</a></li>
                <li><a href="#a">sub02</a></li>
                <li><a href="#a">sub03</a></li>
                <li><a href="#a">sub04</a></li>
                <li><a href="#a">sub05</a></li>
            </ul>
        </li>
    </ul>
</div>
<!-- <div class="none">
</div>
 -->

- CSS

* {margin: 0; padding: 0; }
li {list-style: none; }
body {font-family: 'Nanum Gothic', sans-serif; width: 1200px; margin: 0 auto; }
a{text-decoration:none; color:#000;}
        
.logo {margin: 50px 0; font-size: 30px; text-align: center;}
               
.topMenu {width: 100%; margin-bottom: 20px; text-align: center; height: 40px; }
.topMenu:after {content: ""; display: block; clear: both; }

.menu01 > li{float:left;width:20%;}
.menu01 span {font-size: 20px; font-weight: bold; cursor:pointer;}

.menu01 > li > ul > li{padding:10px 0; cursor:pointer;}
.menu01 > li > .dept01{display:none;}

- JS

//$(document).on('액션', '선택자', function() {
//    $('.dept01').slideDown(300);  행동
//});

$(document).on('mouseover', '.topMenu > ul > li', function() {
    $('.dept01').slideDown(300);
});

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