수평 네이바 (JQuery)

Question

다음 HTML을 기반으로 매우 간단한 수평 네이바를 만들고 싶습니다.

<div id="nav">
    <ol class="clear">
        <li><a href="#">Parent 1</a></li>
        <li><a href="#">Parent 2</a>
            <ul class="clear">
                <li><a href="#">Child 1</a></li>
                <li><a href="#">Child 2</a></li>
                <li><a href="#">Child 3</a></li>
            </ul>   
        </li>
        <li><a href="#">Parent 3</a></li>
     </ol>
</div>

.. 마우스 오버에 Subnav (존재하는 경우)를 표시합니다.

Great Superfish 플러그인에 대해 알고 있지만 여기에 정말 간단하게 유지하고 가능한 경우 플러그인을 사용하지 않으려 고합니다.

많은 감사합니다!

Answer 1

이것은 당신이 올바른 방향으로 시작해야합니다

$(document).ready(function() {
    $("div#nav > ol.clear > li > ul").hide();
    $("div#nav > ol.clear > li:has(> ul)").hover(function() {
        var x = $(this);
        x.children("ul").eq(0).css({'top':x.position().top + x.height()+5, 'left':x.position().left-37}).show();
    }, function () {
        $(this).children("ul").eq(0).hide();
    });
});

<style type="text/css" media="screen">
ol > li { display:inline; margin: 2px}
ul { position:absolute }
ul > li { display:inline }
ul > li > a { yellow; display:block }
</style>

이 사이트에서 데모를 확인하십시오 http://jsbin.com/ejuxa

Answer 2

플러그인을 사용하지 않으려면 CSS와 함께하지 않겠습니까? 다음은 "Ultimate"CSS 드롭 다운 메뉴에 대한 링크입니다. JavaScript가 일반 OL 'CSS에서 쉽게 수행 할 수있는 경우 왜 JavaScript를 사용합니까?

편집하다

여기에 죄송합니다. 링크가 있습니다. http://www.cssplay.co.uk/menus/final_drop.html

방금 Firefox 3.5, Safari 4, IE8 및 Chrome 3에서 이것을 테스트했으며 모두 잘 작동했습니다.