title: How to make a menu selected using mouse over constant till user select an option in menu
body: <p>I have two images, on <code>mouseover</code> event of this two images there are corresponding  two menu bars gets displayed.<br>
  I need to select an option in the menu but on  <code>mouseout</code>, the menu is disappearing.</p>
  
  <p>What can I do to make it better? </p>
  
  <p>Below is my code :</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
          $(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();
              });
          });
  
      &lt;/script&gt;    
        &lt;div id='one'style="border: 10px double #CCCCCC; color: #FFFFFF; background-color: #92DF7B; width: 134px; height: 142px; position: absolute; top: 3px; left: 420px; "&gt;
                 &lt;ul&gt;
                     &lt;li&gt;General&lt;/li&gt;
                     &lt;li&gt;Policy&lt;/li&gt;
                     &lt;li&gt;Manuals&lt;/li&gt;
                     &lt;li&gt;HEXA Documents&lt;/li&gt;
                     &lt;li&gt;ISO&lt;/li&gt;
                 &lt;/ul&gt;
             &lt;/div&gt;
              &lt;div id='two' style="color: #FFFFFF;  background-color: #92DF7B; position: absolute; top: 159px; left: 35px; width: 131px; height: 152px; display:none;"&gt;
                   &lt;ul&gt;
                       &lt;li&gt;General&lt;/li&gt;
                       &lt;li&gt;Policy&lt;/li&gt;
                       &lt;li&gt;Manuals&lt;/li&gt;
                       &lt;li&gt;HEXA Documents&lt;/li&gt;
                       &lt;li&gt;ISO&lt;/li&gt;
                   &lt;/ul&gt;
               &lt;/div&gt;
          &lt;div style="border-color: #FFFFFF; position:absolute; top:176px; left: 188px; height: 403px; width: 534px;"&gt;
  
              &lt;asp:Image  ID="Image1" runat="server" 
                     ImageUrl="~/Images/New Bitmap Image(1).bmp" Width="180px" 
                   CssClass="class1" Height="96px" /&gt;
  
                 &lt;br /&gt;
  
                 &lt;asp:Image ID="Image2" runat="server" 
                     ImageUrl="~/Images/New Bitmap Image (2).bmp" /&gt;
  
          &lt;/div&gt;
  </code></pre>