How to fix this jQuery popup menu?

Question

I tried to create a drop-down menu in jQuery, but that turned out to be pretty complicated.

My code is here:

  $(document).ready(function(){

        $('ul li').mouseover(function()
        {
              $(this).children("ul").show();
        });
        $('ul li ul').mouseover(function()
        {
              $('ul li ul').show();
        }).mouseout(function(){
              $('ul li ul').hide();
        });

  });

Basically, I want to hover over the list item, and sub ul - at the drop-down list, then I can hover over the list items and, if the mouse is disconnected from the auxiliary navigation panel, the menu is hidden again.

thanks whale

UPDATE: I removed the border from CSS, and it works fine, so the tooltip appears when I hover over the 1px border, which is pretty weird.

Answer 1

superfish? jQuery plug-in -. , . , , mouseout. , , ( - 800 ). , , .

Answer 2

jQuery hover(), , sorta.

, :

    $('.clearfix li').hover(function() {
          $('ul', this).show();
        }, function() {
          $('ul', this).hide();
        });

Answer 3

, . , 1 , 1 .

CSS 30px 29px :

        ul li ul {
            border: none;
            position: absolute;
            top: 29px; /* <-- was 30px */

Answer 4

Firefox 1.5.0.1 , . , , , , . , , .