탭포커싱이 용이한 마우스오버 메뉴 제이쿼리

<ul id="gnb">

    <li>

        <a href="">Menu1</a>

        <ul>

            <li><a href="">Menu1-1</a></li>

            <li><a href="">Menu1-2</a></li>

            <li><a href="">Menu1-3</a></li>

        </ul>

    </li>

    <li>

        <a href="">Menu2</a>

        <ul>

            <li><a href="">Menu2-1</a></li>

            <li><a href="">Menu2-2</a></li>

        </ul>

    </li>

    <li>

        <a href="">Menu3</a>

        <ul>

            <li><a href="">Menu3-1</a></li>

            <li><a href="">Menu3-2</a></li>

            <li><a href="">Menu3-3</a></li>

            <li><a href="">Menu3-4</a></li>

        </ul>

    </li>

</ul>







#gnb {width:250px; background:#ccc;}

#gnb > li {display:inline-block;}

#gnb > li > a {display:block; line-height:25px; width:80px; text-align:center;}

#gnb > li.on a {background:#777; color:#fff;}

#gnb li ul {position:absolute; width:80px; height:0; overflow:hidden;}

#gnb li.on ul {height:auto; background:#777;}

#gnb li ul li a {margin:3px 0 3px 10px; color:#fff;}

$("#gnb > li").bind("mouseenter focusin", function() {

    $(this).addClass("on").siblings().removeClass("on");

});

$("#gnb > li").bind("mouseleave focusout", function() {

    $(this).removeClass("on");

});







http://uidevelop.tistory.com/23