<!DOCTYPE html>

<html lang="ok" dir="ltr">

  <head>    <meta charset="utf-8">

    <title>홈페이지 만들기</title>

  </head>

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>

  <style>

   *{

     margin:0 ;

     padding:0 ;

     }

  li{list-style:none;}

  a{text-decoration:none; color:black;}

a:hover{

        color:red;

        }

  header{

         width:1600px;

         margin-top:20px;

        }

nav {

     width:1600px;

     hieght:50px;

     border:1px solid red;

     padding-bottom:10px;

     margin:0 auto;


     }

nav > li{

      font-size:12px;

      relative;

      left:50%;

      transform:translateX(-50%);

      display:inline-block;

      margin-right:40px;

      line-height:40px;

      }

.sub_menu{

        display:none;

        }

  </style>

  <script>

  $(document).on('mouseover', 'nav > li', function () {

    $('.sub_menu').slideDown(300);

});

$(document).on('mouseout', 'header', function () {

        $('.sub_menu').slideUp(300);

    }

});

  </script>

  <body>

    <div id="container">

      <header>

        <nav>

          <li><a href="">WOMEN</a>

            <ul class="sub_menu">

              <li><a href="">서브</a></li>

              <li><a href="">서브</a></li>

              <li><a href="">서브</a></li>

              <li><a href="">서브</a></li>

              <li><a href="">서브</a></li>

              <li><a href="">서브</a></li>

            </ul>

          </li>

          <li><a href="">MEN</a>

            <ul class="sub_menu">

              <li><a href="">서브</a></li>

              <li><a href="">서브</a></li>

              <li><a href="">서브</a></li>

              <li><a href="">서브</a></li>

              <li><a href="">서브</a></li>

              <li><a href="">서브</a></li>

            </ul>

          </li>

          <li><a href="">KIDS</a>

            <ul class="sub_menu">

              <li><a href="">서브</a></li>

              <li><a href="">서브</a></li>

              <li><a href="">서브</a></li>

              <li><a href="">서브</a></li>

              <li><a href="">서브</a></li>

              <li><a href="">서브</a></li>

            </ul>

          </li>

        </nav>

      </header>

    </div>

  </body>

</html>









메뉴누르면 서브메뉴나오게하고싶어서 코딩해봤는데 안나와유.. 뭐가틀린지모르겠음..

제이쿼리배운지2일됬습니다..