如何使用鼠标选中菜单进行选择，直到用户在菜单中选择一个选项

Question

我有两个图像，mouseover这两个图像的事件有相应的两个菜单栏获取显示。
我需要在菜单中选择一个选项，但在mouseout上，菜单正在消失。

我该怎么做才能让它变得更好？

下面是我的代码：

<script type="text/javascript"> 
     $(document).ready(function() 
    { 
      $("#Image1").mouseover(function() { 
       $("#one").show(); 
      }); 
      $("#Image1").mouseout(function() { 
       $("#one").hide(); 
      }); 
     }); 

     $(document).ready(function() { 
      $("#Image2").mouseover(function() { 
       $("#two").show(); 
      }); 
      $("#Image2").mouseout(function() { 
       $("#two").hide(); 
      }); 
     }); 

    </script>  
     <div id='one'style="border: 10px double #CCCCCC; color: #FFFFFF; background-color: #92DF7B; width: 134px; height: 142px; position: absolute; top: 3px; left: 420px; "> 
       <ul> 
        <li>General</li> 
        <li>Policy</li> 
        <li>Manuals</li> 
        <li>HEXA Documents</li> 
        <li>ISO</li> 
       </ul> 
      </div> 
      <div id='two' style="color: #FFFFFF; background-color: #92DF7B; position: absolute; top: 159px; left: 35px; width: 131px; height: 152px; display:none;"> 
       <ul> 
        <li>General</li> 
        <li>Policy</li> 
        <li>Manuals</li> 
        <li>HEXA Documents</li> 
        <li>ISO</li> 
       </ul> 
      </div> 
     <div style="border-color: #FFFFFF; position:absolute; top:176px; left: 188px; height: 403px; width: 534px;"> 

      <asp:Image ID="Image1" runat="server" 
        ImageUrl="~/Images/New Bitmap Image(1).bmp" Width="180px" 
       CssClass="class1" Height="96px" /> 

       <br /> 

       <asp:Image ID="Image2" runat="server" 
        ImageUrl="~/Images/New Bitmap Image (2).bmp" /> 

     </div> 

Answer 1

试试这个

<script type="text/javascript"> 
     $(document).ready(function() 
    { 
      $("#Image1").mouseover(function() { 
       $("#one").show(); 
       $("#two").hide(); 
      }); 

      $("#one").mouseout(function() { 
       $("#one").hide(); 
      }); 

     }); 

     $(document).ready(function() { 
      $("#Image2").mouseover(function() { 
       $("#two").show(); 
       $("#one").hide(); 
      }); 

      $("#two").mouseout(function() { 
       $("#two").hide(); 
      }); 

     }); 

    </script> 

Answer 2

只有藏在里点击菜单，

<script type="text/javascript"> 
    $(document).ready(function() 
{ 
     $("#Image1").mouseover(function() { 
      $("#one").show(); 
     }); 



     $("#one li").click(function() { 
      $("#one").hide(); 
     }); 

    }); 

    $(document).ready(function() { 
     $("#Image2").mouseover(function() { 
      $("#two").show(); 
     }); 



     $("#two li").click(function() { 
      $("#two").hide(); 
     }); 
    }); 

</script>