水平導航欄（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> 

..它會在鼠標懸停料理文憑（如果存在）。

我知道偉大的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時，它可以很容易地在普通的醇'CSS？

編輯

對不起這裏是鏈接：http://www.cssplay.co.uk/menus/final_drop.html

我只是在Firefox 3.5和Safari 4，IE8和Chrome 3測試這一點，它在所有這些工作得很好。