css3 & jquery slidedown menu

<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style>
    body {
      font-family: Gullim;
      font-size: 13px;
      text-align: center;
      background: #E3CAA1;
    }

    ul {
      text-align: left;
      display: inline;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    ul li {
      font-weight: bold;
      display: inline-block;
      margin-right: -4px;
      position: relative;
      padding: 15px 20px;
      background: #fff;
      cursor: pointer;
    }
    ul li:hover {
      background: #555;
      color: #fff;
    }
    ul li ul {
      padding: 0;
      position: absolute;
      top: 45px;
      left: 0;
      width: 150px;
      display: none;
      visibility: hidden;
    }
    ul li ul li {
      background: #555;
      display: block;
      color: #fff;
    }
    ul li ul li:hover { background: #666; }
    /*
    ul li:hover ul {
      display: block;
      visibility: visible;
    }
    */
</style>
<title>css 드롭다운 메뉴</title>
</head>
<body>
<ul>
    <li>홈</li>
    <li>인사말씀</li>
    <li>포트폴리오
        <ul>
            <li>웹디자인</li>
            <li>웹개발</li>
            <li>수상내역</li>
        </ul>
    </li>
    <li>블로그</li>
    <li>연락처</li>
</ul>
<script>
    $(function(){
        $("ul li").hover(
            function(){
                $(this).children("ul").css("visibility","visible");
                $(this).children("ul").slideDown();
            },
            function(){
                $(this).children("ul").slideUp();
            }
        );
    });
</script>
</body>
</html>