在jquery中顯示帶有基本的鼠標懸停事件的菜單

我想在鼠標位於主項目上時顯示菜單項目列表，並且同時隱藏前面顯示的項目。但效果並沒有變得有效。我想下面的jQuery的代碼是不正確的做我想要的。謝謝。在jquery中顯示帶有基本的鼠標懸停事件的菜單

<html> 
<head> 
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
    <script type="text/javascript"> 
     $(document).read(function(){ 
     $("MainMNItem:not(:first)").hide(); 
     $("MainMNItem a").mouseover(function() 
     { 
      $("Item:visible").slideUp("slow"); 
      $(this).parent().next().slideDown("slow"); 
     }); 
     }); 
    </script> 
    <style> 
    body{font-family:"Times New Roman"; font-size:16px;} 
    Menu{width:330px;} 
    Item a{color:#000;} 
    Item{margin:0;} 
    MainMNItem{background:#f11;font-size:18px;padding:5px;width:330px;} 
    MainMNItem a{color:#fff;} 
    ul{list-style:none;padding:5px;} 
    </style> 
</head> 
<body> 
    <Menu> 
     <MainMNItem><a href="#">Home</a></MainMNItem> 
     <Item> 
      <ul> 
       <li><a href="#">Index</a></li> 
       <li><a href="#">Documents</a></li> 
      </ul> 
     </Item> 
     <MainMNItem><a href="#">About Us</a></MainMNItem> 
     <Item> 
      <ul> 
       <li><a href="#">History</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </Item> 
    </Menu> 
</body> 
</html>

來源

2012-01-18 Mackintoast